Wednesday, June 15, 2016

Directives,Modules into AngularJS(Level-1)

1.1 Basics of AngularJS-Directives,Modules


for building this application what you need to know is
  Must Know:
HTML & CSS
JavaScript


Directives
A Directive is a marker into the HTML Tag that tells Angular to run of reference some                        JavaScript Code.

To define Directive into AngularJS Web Application you can do this by using ng-controller.

Example. :
                    If u have a Function into the JavaScript names as GrocessaryShopController then into                         HTML you have to write
 
                   <body ng-controller="GrocessaryShopController">

This is used for binding controller into model=.

Modules
This is one where we can out code into pieces so we can reuse that easily.
Modules is also used to make out code encapsulated.
Modules makes our code more testable and readable.

To define Modules into AngularJS Web Application you can do this by using angular.module.
 
         Example :
                 var application = angular.module('grocessaryshop',[]);
where grocessaryshop is the name of our Application and [] by using this we can define                                  our module dependencies.

 To develop Below Application you need to library which is

1. Twitter Bootstrap
You can Download this by using http://getbootstrap.com

2. AngularJS Library
You can Download this by using http://angularjs.org


Create the basic HTML and App.js file which has nothing

HTML File has AngularJS File and Basic HTML Template which has html,head and Body Tag.

HTML File
     <html>
             <head>
                      <script data-require="angular.js@*" data-semver="1.3.0-beta.5"
                           src="https://code.angularjs.org/1.3.0-beta.5/angular.js">
             </head>
              <body>
                               //Some Content
              </body>
     </html>

app.js
            var app;

Exercise: -

1.Create a Module named GrocessaryShop so we can get started on this marketing journey.
2.Attach the GrocessaryShop module to our HTML page with a Directive.
3.In index.html, create a simple Expression to display "Hello, Pratik!" message.



Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to  visionfortech.blogspot.com

Related Posts :


1)  Where we can use AngularJS and Difference Between angularjs and Jquery
2)  (Level 1.1) Directives,Modules into AngularJS
3)  (Level 1.2) Controller Into AngularJS
4)  (Level 1.3) In built Directives of AngularJS
5)  (Level 2.1) AngulerJs Filters and How to Create Custom Filters into AngularJs
6)  (Level 2.2) Tabs into Angular


No comments:

Post a Comment

Protected by Copyscape