AngularJS is a pure JavaScript framework. It extends HTML attributes with Directives known as ng-directives. A very basic angular application looks like below,
Here we define the ng-app in which the angular code resides. We add ng-model directive to input for data binding and show it in curly brackets in mustache style in next line. (We usually define a model nested inside a controller. Since we have not done that here it resides in $rootScope). We'll look at some useful things comes in AngularJS next.
This directive binds an form element to a property on the scope using NgModelController, which is created and exposed by this directive.
Here we define the ng-app in which the angular code resides. We add ng-model directive to input for data binding and show it in curly brackets in mustache style in next line. (We usually define a model nested inside a controller. Since we have not done that here it resides in $rootScope). We'll look at some useful things comes in AngularJS next.
Directives (documentation)
These are markers on a DOM element that tells AngularJS's HTML Compiler ($compile) to attach specific behavior to that DOM element. Below are some directives which comes with AngularJS. There are quite a lot of directives comes with the library. You can also create custom directives.
- ng-app : defines AngularJS application
- ng-model : binds the value of HTML controls (input, select, textarea) to a property on the scope.
- Binds view to a model
- Provides validation behavior
- ng-bind : binds application data to HTML view. Tells angular to replace text content inside a HTML element with expression's value
This directive binds an form element to a property on the scope using NgModelController, which is created and exposed by this directive.
Module
You can configure your module using this.Constants in AngularJS. You can inject constants to a module.
Dependency Injection
https://docs.angularjs.org/guide/di
Controllers
AngularJS applications are controlled by controllers. Look at the below example,
\
Above MyApp is the name we gave to the ng-app attribute. We define the controller (SubController) and put it inside the module. After that we can reference it from the DOM. Without adding the controller into the module, we can also keep it global and reference from DOM. but it is not a good practice. Controllers should not have any logic.
Services
Service is a component that does a specific job like logging, timer etc. Services are wired using Dependency Injection. Services in AngularJS are,
- Lazily initialized : Instantiated only when a component depends on it
- Singleton: Components depends on the services gets a reference to the single instance of the service through a factory
To use a service you should add a dependency to that from your controller, service etc. Developers can also create there own custom services.
AngularJS provides services like $route, $window, $location etc.
Factory
You can create service using Factory as well. Factory and Services are kind of same.
Application Structure and Code organizing
AngularJS projects can be structured in many different ways. Each carries there own pros and cons. It solely depends on what is your requirements are. Following are some useful articles for you to make the decision.
http://stackoverflow.com/questions/17461242/angularjs-application-file-structure
http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript
AngularJS 1.4 and 2.0 can exist within the same project. See how to do it.
The calling order of AngularJS application (link)
https://github.com/johnpapa/angular-styleguide
http://cliffmeyers.com/blog/2013/4/21/code-organization-angularjs-javascript
Angular 1.4 and 2.0
Angular 2.0 is the rewritten version of Angular optimized for mobile and future browsers. It's yet to be released but you can take a look from https://angular.io/. See whats new in Angular 2.0 and this.AngularJS 1.4 and 2.0 can exist within the same project. See how to do it.
Authentication
https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acecThe calling order of AngularJS application (link)
- app.config
- app.run
- you can use run block for authentication
- directive's compile functions
- app.controllers()
- directive's link functions
Tips and Tricks
http://demisx.github.io/angularjs/2014/09/14/angular-what-goes-where.htmlhttps://github.com/johnpapa/angular-styleguide
