- It gives our applications a clean and loosely couple's structure
- Includes a lot of re-usable code
- Makes oour application more testable
to use Angular :
- Node Package Manager - nodejs.org - install (for test $node --version)
- Angular CLI - Command-line Interface - to create new angular project, or generate some boiler plate code as well as deployable packages.
$sudo npm install -g @angular/cli $sudo npm install -[global] @[package] - if you don't put -g angular cli will be installed current folder and cannot accessable anywhere else
to create a new angular project
$ng new hello-world
download free ediyor, such as https://code.visualstudio.com
Shift + Cmd + P (on Mac) -> code -> Shell Command:Install 'code' command in PATH
go to the project on the terminal,
hello-world$ code .
it will open the project on editor..
to test/run our project
hello-world$ ng serve #** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
that's all. go to a browser and goto -> http://localhost:4200 (enter)
- e2e : end to end test
- node_modules : all the packages, bundles etc..
- src: source codes
- assess : icons, images, etc..
- environments : we store configuration settings for environments(dev, prod etc..)
- main.ts : starting point of a program
- pollyfills.ts : fill the gaps between js and angular and browsers
- .editorconfig : same editor conf.in a team
- karma.conf.js : test runner conf.
- pakage.json : dependencies
- tsconfig.json : typescript compiler config - no need to change anything
- OPEN EDITOR
- tslint.json : a bunch of setting typescript compiler
Angular CLI Commands
$ ng serve #starts ng server
$ ng g c course (enter) - creates new component
String Interpolation : Template:Xxx
Binding Interpolation :
-- one way binding!!
Components should not include any logic other than the presentation logic!!!
new services should define in providers in an app.module.ts !!
AngularJs is a Dependency Injection framework!!
$ ng g s email #generates a service classes and updates app.module.ts
Bootstrap how to add Bootstrapt to angularjs..
$ npm install bootstrap --save
Differences Between Angular 4 and Angular 5
Angular JS was mainly built –
To provide a proper architecture to the application, throughout its life cycle, from UI designing to testing phase. To provide a modular architecture to the application, so that client end and server end of the application can be designed and developed parallelly. • To enable the developers to design DOM (Document Object Model) independent application logic.
The framework gained substantial popularity among web developers. As promised by Google, to make Angular JS more user friendly and effective, it is updated twice a year.
Apart from being a major release jump from version 2, Angular 4 also had many new features along with changes which were non-compatible with the previous versions. Few of these interesting new features were:
- Dynamic Components with NgComponentOutlet: *ngComponentOutlet directive enables the web developer to develop dynamic components in a declarative way.
- Animation:To ensure that the application package is not heavy due to additional coding, which is not required for the specific application, Animations were put into a separate package of its own, which were earlier part of @angular/core module
- TypeScript 2.1/2.2: Angular 4 improved the Type security of the applications and the speed at which the ngc-Complier executes. This will help ensuring coding faults like defining a variable & telling TypeScript that “null” and “undefined” can be entered as the variable’s value.
- HTTP Request Simplified: Adding parameters to the “HTTP” request, to perform a search operation has been simplified.
- Service: To perform the get or update operations, a new service was introduced, known as “Meta tags”
On the other hand, when Angular 5 was released, it came with a whole bunch of additional and new features, service improvements and bug fixes. Some of these features were actually, a pleasant surprise for the existing Angular users as well. We have listed down few very interesting features for our readers, so that they can easily understand the difference between the two versions.
- Build Optimizer: This is a tool which was included in the CLI to help the developers in creating a smaller bundle for the application. Apart from decreasing the users’ bundle size, the feature also helps in increasing the boot speed of the application for the users.
- Compiler Improvements: To enhance faster rebuilds for production and AOT (Ahead of Time) builds, Angular 5 supports incremental compilation.
- New Router Lifecycle Events:This new feature was added to enable the developers in tracking the cycle of the router, starting from running guards to the completion of activation.
- HttpClient: This feature has been recommended for all the application as HTTPClient was highly appreciated. The framework developer are not suggesting anymore, to use the previous @angular/http library. Developers can update the HTTPClient in 3 easy steps:
In each module, replace HttpModule with Http Client Module from @angular/common/http.
- Inject the HttpClient service
- remove any map(res =>res.json()) calls, which are no longer needed.