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 :
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
Comments
Post a Comment