Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point

Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Angular

Start With AngularJS: Part 2

Here's the first part of the series:

To setup AngularJS first go on AngularJS website & download AngularJS file or you can also use CDN link. Here I used CDN link in all my projects.
  1. Start Visual Studio
  2. Create new project on visual studio
  3. Create new folder on visual studio & add your AngularJS & css folder
  4. Create new html file name with hello program.

Add your CDN link on HTML file:

HTML File

Run your html file by clicking on right side of html file & view in browser.

Output

run

  1. <!DOCTYPE html>  
  2. <html ng-app>  
  3.   
  4.     <head>  
  5.         <title>AngularJS</title>  
  6.         <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">  
  7.             </script>  
  8.     </head>  
  9.   
  10.     <body> Hello world.  
  11.         <p>The sum of 10 and 1 is equal to <b>{{10+1}}</b></p>  
  12.     </body>  
  13. </html>  
AngularJS Module

It is a container. It divided apps into small component whose reusable, functional component who’s integrated with other components.
  1. It has the place where we write AngularJS code for web app.
  2. Each module is identified by a unique name and can be dependent on other module.
  3. It is the place where we define dependencies.
  4. AngularJS module is single in every web page.

Why we use Module

  1. Modules are used to separate logics say services, controllers, application etc. and keep the code clean.
  2. We define modules in separate js files and name them as per the module.js file.

It has two types

  1. Application Module: It is used to initialize application with controller.

    var mainApp = angular.Module (“mainApp”, []);

    1st parameter - the name of the module.
    2nd parameter - the array of module names on which this module is dependent on above code.

  2. Controller Module: It is used to define controller in web app.

    As: MainApp. Controller (“student Controller”, function ($scope) {
    }

Used component in module

  1. Directive: AngularJS directives are used to extend HTML.Starting with ng- prefix.

  2. Filter: Filters are used to change modify the data. It is using pipe character for filter data.

  3. Controller: A controller is defined using ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions.

  4. Factory: A factory is a simple function which allows you to add some logic before creating the object. It returns the created object.

  5. Services: Services are JavaScript functions, which are responsible to perform only specific tasks.

  6. Provider: Provider is used by AngularJS internally to create services, factory, etc.

  7. Value: It is required to pass values to the controller during config phase (config phase is when AngularJS bootstraps itself).

  8. Config: It is used to inject module wise configuration settings to prevent accidental instantiation of services before they have been fully configured. This block is created using config () method.

  9. Route: Route, for switching views based on location (URL) changes.

Reference: AngularJS Tutorial

MVC Pattern

The core idea behind MVC is that you have clear separation in your code between managing its data (model), the application logic (controller), and presenting the data to the user (view).

  1. Open old project.
  2. Add new html File name MVC.
  3. Add code & run Program & watch Output.

Output

Output

Complete Code

  1. <!DOCTYP Ehtml>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">  
  6.             </script>  
  7.             <meta charset="utf-8">  
  8.                 <title>MVC pattern in AngulaJS</title>  
  9.                 <script type="text/javascript"> var app = angular.module("app", []); //defining module app.controller('Ctrl', function ($scope) { //defining controller varProductsalseman = ["shiva", "shukla"] //defining book's authors model it also called pojo $scope.Product = { id: 'sh05', name: 'AngularJS ebooks', salseman: Productsalseman }//defining book viewmodel }); </script>  
  10.     </head>  
  11.     <body ng-app="app">  
  12.         <div ng-controller="Ctrl">  
  13.             <table>  
  14.                 <tr>  
  15.                     <td>Product Id :</td>  
  16.                     <td>  
  17.                         <spanng-bind="Product.id">  
  18.                             </span>  
  19.                     </td>  
  20.                 </tr>  
  21.                 <tr>  
  22.                     <td>Name :</td>  
  23.                     <td>  
  24.                         <spanng-bind="Product.name">  
  25.                             </span>  
  26.                     </td>  
  27.                 </tr>  
  28.                 <tr>  
  29.                     <td>salseman :</td>  
  30.                     <td>  
  31.                         <spanng-bind="Product.salseman">  
  32.                             </span>  
  33.                     </td>  
  34.                 </tr>  
  35.             </table>  
  36.         </div>  
  37.     </body>  
  38.   
  39. </html>  

Up Next
    Ebook Download
    View all
    Learn
    View all