A project aimed to help the user learn AngularJS basic topics. Each unit contains a tutorial with concepts, examples and best practices.
- Expressions
- Controllers
- Directives
- Custom Directives
- Forms
- Services
- Best Practices
<!-- ng-app directive -->
<!-- The ng-app directive creates an angular application by running the specified module when the document loads -->
<!-- By including this directive, the enclosed HTML is going to be treated as part of the Angular app -->
<body ng-app="learnAngularApp"> <!-- Attaching a Controller -->
<!-- In order to achieve this, you need to use the ng-controller Directive -->
<!-- You are attaching this controller to an element inside of HTML tags-->
<!-- You can create an alias with the 'as' keyword -->
<div class="footer" ng-controller="FooterController as footerController">
<div class="container">
<p>{{footerController.footer.projectName}}</p>
</div>
</div><!-- The scope of the controller is only inside the closing <div> -->/* Modules */
/* Provide a way to write encapsulated functionality for the Angular application */
/* Promotes maintainability, testability and readability */
/* The dependencies of the application are defined on Modules*/
/* It is a good practice to split Modules around functionality*/
/* Enclosing Javascript in a Closure is a Good Practice*/
(function () {
var app = angular/* AngularJS library*/
/* Application Name*/
.module('learnAngularApp',
/* Dependencies*/
[
'app-directives',
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
]) <!-- Filters -->
<!-- You can create filters with a pipe | -->
<!-- Filters take the result of the first expression and send the output into the second expression -->
<p>You can create filters with a pipe | </p>
<p>Currency = {{ 5 | currency }} </p>
<p>Currency = {{ 0 | currency }} </p>
<p>Currency = {{ 1 | currency }} </p>
<br/>
<!-- Formatting with Filters -->
<!-- You can specify a filter with the following syntax-->
<!-- {{ data | filter:options }}-->
<h1>Formatting with Filters </h1>
<p>You can specify a filter with the following syntax { { data | filter:options } } </p>
<p>Date = {{'06242015' | date:'MM/dd/yyyy' }} </p>
<p>Lowercase = {{'LowerCase' | lowercase }} </p>
<p>Uppercase = {{'UpperCase' | uppercase }} </p>
<p>LimitTo = {{'abcdefghijklm' | limitTo:5 }} </p><!-- Expressions -->
<!-- Allow you to insert dynamic values into the HTML-->
<div class="row marketing">
<h4>Numerical Operations</h4>
<p> 5 + 5 = {{ 5 + 5 }}</p>
<h4>String Operations</h4>
<p> {{ "String"}} {{ "Operations Example"}}</p>
</div>npm install
bower install
grunt serve
