AngularJS is a Javascript framework maintained by Google that is used for making web apps. It is based on MVC and MVVM design patterns. AngularJS runs on HTML and plain JavaScript, so no other dependencies are needed for it to work. Its supported features include bundling codes in modules, Dependency Injection, Routing, and two-way data binding.
You probably know all those things already. If you didn’t, you’re in the right place. If you did, you could still probably use this.
As AngularJS is becoming increasingly common, more companies are hiring developer positions requiring AngularJS.
Unfortunately, sometimes to get the job you need a little more than knowing how to write code.
- AngularJS Architectrue
-The Template (View)
-The Scope (Model)
-The Controller (Controller)
HTML attributes are extended with Directives, and data binds to HTML with Expressions.
- AngularJS Directives
Directives are extended HTML attributes that have the “ng-” prefix.
\ 3 Main Directives:
\ ng-app: the directive in Angular to flag the HTML element to be used as the application’s root element. Spinal-case is used for custom attributes, while camelCase is used for the corresponding directives that implement them.
\ ng-model: the directive that allows binding values of HTML controls (e.g. input, select, text area) to application data. Changes in the scope are reflected in the view, and changes in the view are also reflected back into the scope.
\ ng-bind: the directive that binds application modal data to the HTML view.
- Tools for Testing AngularJS Applications
-Karma
-angular-mocks
-Jasmine
- Methods to Share Data between Controllers
-Services**
-using Events
-$parent, nextSibling, controllerAs
-using the $rootScope
**Using Services is the cleanest, easiest and quickest way to share data between controllers. If only asked about one method, services is recommended.
- AngularJS Digest Cycle
The process behind data binding in AngularJS. In each Digest Cycle, the old scope model values and the new values are compared. Digest cycles are triggered automatically, but $apply() can be used to manually trigger the digest cycle.
- Internationalization
A method that is used on multilingual language websites, internationalization is a way to display locale-specific information on the site.
- Some Differences**: AngularJS Expressions vs JavaScript Expressions
-AngularJS expressions can be written in HTML, while JavaScript expression cannot.
-AngularJS expressions do not support conditionals, loops, and exceptions, but they are supported by JavaScript expressions.
-AngularJS expressions do support filters, while JavaScript expressions do not.
**This is not a comprehensive list of their differences, only a few major ones. If you know other differences, just add these to your repertoire! And if you’re feeling generous, share your examples in the comments :)
- Basic Steps to setup an Angular App
Create an angular.module
Assign a controller to the module
Use ng-app to link the module to HTML
Use ng-controller directive to link the controller to HTML
- Angular Modules
The area where an Angular application’s code is written. Writing Modules makes code easier to maintain, test, and read. All of an apps dependencies are defined in modules.
- Directive Scopes
3 Types:
Parent Scope: the default scope
Child Scope: The scope to be used if set properties and functions are not relevant to other directives or the parent.
Isolated Scope: the scope to use if the directive to be built is self contained and reusable. The isolated scope is used for private or internal use; it doesn’t inherit from the parent scope.
- Isolating Scopes
A directive’s Scope can be isolated by passing an object to the scope option of the directive. Doing this will tell the directive to keep the scope inside of itself, and not to inherit or share with any other scopes.
- One-Way binding vs Two-Way Binding:
-One-Way: Changes in data models are not automatically updated in view; custom code has to be written to update it each time.
-ng-bind has one-way binding
-Two-way: In two-way binding, the scope variable will automatically change it’s value every time its data model is assigned a new value.
- Role of $routeProvider
$routeProvider is used to configure roots in an AngularJS application. It can also be used to link a URL with a corresponding HTML page or template, and optionally a controller.
- $rootscope vs scope
Both are an object used for sharing data from the controller to view.
However, $rootscope is available globally across all the controllers.
$scope is only available in controllers that created it, as well as their children controllers
- Scope vs $scope
$scope is used whenever a dependency injection (D.I.) is used.
scope is used for directive linking.
That’s all for now, but don’t worry, we know human-speak can be hard. We’ll be back with more soon!
(Click Here to Download This Guide as a PDF)
https://drive.google.com/file/d/1mdb7Ev0M1EwBPzVJLjE8vq_ShZ_z1skb/view?usp=drivesdk