Angular js for beginners
•Download as PPTX, PDF•
6 likes•3,174 views
This is a laconic presentation on Angular JS for beginners only. I have emphasized on example rather than theory. There are self explained source code urls attached with slides. In the last slide I have attached source code for a real life example using Angular JS an BootStrap which may be very helpful to understand the concept of Angular JS.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Angular js for beginners
Similar to Angular js for beginners (20)
Recently uploaded
Recently uploaded (20)
Angular js for beginners
- 1. Angular JS QuickStrat Md. Munirul Hoque
- 2. Why Angular ?? ❖ Two way data binding. ❖ Data Dependency Injection. ❖ MVC- MVVM - MVW ❖ HTML Templating
- 3. I often say that AngularJS is what the web browser would have been, had it been designed for application Miško Hevery AngularJS Creator
- 4. Enough Talk Let’s Code
- 6. A simple program <div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
- 7. Directives A directive is a behavior or DOM transformation which is triggered by the presence of a custom attribute, element name, or a class name. A directive allows you to extend the HTML vocabulary in a declarative fashion.
- 8. Directives ❖ The ng-app directive initializes an AngularJS application. It is the owner of the application. ❖ The ng-init directive initialize application data. ❖ The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. ❖ The ng-bind directive binds the innerHTML element to the application variable name. Source Code
- 9. Expression and ng-repeat ❖ AngularJS expressions binds data to HTML the same way as the ng-bind directive. ❖ AngularJS will "output" data exactly where the expression is written. ❖ The ng-repeat directive clones HTML elements once for each item in a collection (in an Source Code
- 10. Controllers ❖ Controllers are regular javascript objects that controls data. ❖ Controller is defined as ng-controller which creates constructor function. source code
- 11. Controllers and $scope ❖ $scope is an object that refers to the application mode. ❖ $scope sets up the initial state through properties and functions. ❖ Controller constructor function will be invoked with $scope variable as a injectable parameter. ❖ Those properties construct View Model. ❖ $scope properties will be available to the template at the point in the DOM where the controller is registered.
- 12. Controllers in External In larger applications, it is common to store controllers in external files. [Live Example ]
- 13. Service ❖ Services are substitutable objects that are wired together using dependency injection (DI). ❖ Service is - Lazily instantiated Singleton ❖ Service is a stateless object that contains useful functions. These functions can be called from anywhere; Controllers, Directive, Filters etc.
- 14. Service Built in Services: There are many useful built-in services in Angular - $http, $window, $location, $route. Custom Services : Generally there are 2 ways to create services - ❖ using service() ❖ using factory()
- 15. Injecting Dependencies in Services ❖ Angularjs provides out of the box support for dependency management. ❖ AngularJS services are the objects that can be injected in any other Angular construct (like controller, filter, directive etc). ❖ You can define a service which does certain tasks and inject it wherever you want. Source Code Example
- 16. Wrapping all …….. A real life example [ self explained Source Code ]
Editor's Notes
- MVC done right Most frameworks implement MVC by asking you to split your app into MVC components, then require you to write code to string them up together again. That’s a lot of work. Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest. Angular manages your components for you and also serves as the pipeline that connects them. Because Angular acts as the mediator, developers also won’t feel tempted to write shortcuts between components that break abstractions just to make them fit easier. A declarative user interface. Angular uses HTML to define the app’s user interface. HTML is a declarative language which is more intuitive and less convoluted than defining the interface procedurally in JavaScript. HTML is also less brittle to reorganize than an interface written in JavaScript, meaning things are less likely to break. Plus you can bring in many more UI developers when the view is written in HTML. HTML is also used to determine the execution of the app. Special attributes in the HTML determine which controllers to use for each element. These attributes determine “what” gets loaded, but not “how”. This declarative approach greatly simplifies app development in a sort of WYSIWYG (what you see is what you get) way. Rather than spending time on how the program flows and what should get loaded first, you simply define what you want and Angular will take care of the dependencies.
- HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
- The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application. The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the innerHTML of the <p> element to the application variable name.
- Source Code AngularJS is perfect for database CRUD (Create Read Update Delete) applications. Just imagine if these objects were records from a database. The ng-init directive defines initial values for an AngularJS application. Normally, you will not use ng-init. You will use a controller or module instead. You will learn more about controllers and modules later.
- Source Code
- source code In Angular, a Controller is a JavaScript constructor function that is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be available as an injectable parameter to the Controller's constructor function as $scope. Use controllers to: Set up the initial state of the $scope object. Add behavior to the $scope object. Do not use controllers to: Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation. Format input — Use angular form controls instead. Filter output — Use angular filters instead. Share code or state across controllers — Use angular services instead. Manage the life-cycle of other components (for example, to create service instances).
- Source Code
- Consider above diagram. Here we divide our application in two controllers: 1. Profile and 2. Dashboard. Each of these controllers require certain user data from server. Thus instead of repeating the logic to fetch data from server in each controller, we create a User service which hides the complexity. AngularJS automatically inject User service in both Profile and Dashboard controller. Thus our application becomes for modular and testable.
- Source Code We already saw in previous tutorials how to use angularjs dependency management and inject dependencies in controllers. We injected $scope object in our controller class.
- self explained Source Code