Template vs templateUrl AND样式vs styleUrls-性能

Question

In Angular 2, we can either use inline or url approach for templates and styles. Using url is good for modularity, readability and IDEs also provide code assistance. Using url will result in additional request from browser which might cause some performance drop. What's the recommended way of using templates and style - either inline or url?

Example from Angular 2 cheatsheet

template: 'Hello {{name}}'
templateUrl: 'my-component.html'    

styles: ['.primary {color: red}']
styleUrls: ['my-component.css']

Answer 1

Yes well said

Using url is good for modularity, readability and IDEs also provide code assistance. Using url will result in additional request from browser which might cause some performance drop

but its depends on us how long our code is according to @mgchev style guide

Extract the more complex and bigger templates, longer than 15 lines of code, into a separate file and put them next to their controllers' definition.

Why?: In case a big and complex template is inlined in the component metadata it may shift the focus from the component's logic defined within the controller.

but if we look at the officials style guide than it will tell us to use seprate file if coding exceeds more than 3 lines

Do extract templates and styles into a separate file, when more than 3 lines.

also same case apply's in the Css styles, so better is to provide exteranal url instead of inline if we have complex code. also see here :

• https://mgechev.github.io/angular2-style-guide/
• https://angular.io/styleguide