What is it all about?
Angularjs is a free JavaScript open-source framework for client-side MVC or MVVM architecture, along with components that are commonly used in Internet Applications based on the expansion of HTML with new tags.
Key Features
Lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. To help you structure your application better and make it easy to test, AngularJS teaches the browser how to do dependency injection and inversion of control. Helps with server-side communication, taming async callbacks with promises and deferreds. Makes client-side navigation and deeplinking with hashbang urls or HTML5 pushState a piece of cake. Client-side MVC modular style. Models are simple objects in your JavaScript controller functions which are manipulated on the views using scopes. Two way binding + custom watchers for variable change Extension to HTML, i.e. Directives in the shape of custom HTML tags or attributes. Dependency Injection to order Services etc on the go in your code files Best SPA (Single Page Application) modal with services like $routeProvider and $location. Different built in services like $http, $resource, $view etc Filters, built-in e.g. for currency, orderby and user defined.
Resources
Resource Type |
Link |
|---|---|
| Wikipedia | https://en.wikipedia.org/wiki/AngularJS |
| Code Example | http://www.w3schools.com/angular/ |
| YouTube Video | https://youtu.be/zKkUN-mJtPQ |
Pricing
Yearly
Monthly
Lifetime
Free
Freemium
Trial With Card
Trial No Card
By Quote
Description
Free
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
){kind=logo}
Product Analysis
JavaScript
Javascript frameworks and libraries
AngularJS Review - HTML enhanced for web apps
AngularJS is an Open Source JavaScript framework that is mainly used for building Single Page Application (SPA). It provides a client side framework with either model-view-controller (MVC) or model-view-viewmodel(MVVM) architecture. It also contains integrated tools that help you build well-structured client side applications with less code that are both testable and easily maintained. AngularJS is considered to be a next generation framework due to its massive support from developers around the globe, while being maintained by Google who will surely remain at the forefront of the technology industry. It will give you a complete framework with which to build large or small applications.
Here are some advantages to using AngularJS and why you may what to choose it when building your next application.
Open Source – this JavaScript framework is FREE, hence it will give you an opportunity to build powerful applications at no cost.
MVC integration –AngularJS features an MVC architectural pattern; the view is defined in HTML while the controller and model are implemented in JavaScript.
Example.
View
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>MyApp</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Project</h1>
<div ng-view>
<div id="title"></div>
<div id="content">Sample content </div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</html>
- AngularJS extends HTML through the use of directives. In the example above we used a div as the container of the content of our page. On that div we can see the ‘ng-view’ attribute. This will be significant when the application progresses to rendering multiple views. We also used the ‘ng-app’ directive to define that this is an AngularJS application. In order for us to use AngularJS attributes we need to reference them in our page. In our case we used CDN or Content Delivery Network but you’re free to download it and add it on your application and specify its location from the page.
Module
var myApp = angular.module("myApp", []);
- When AngularJS loads, it will look for a module named ‘myApp’ because of the directive we defined on our view.
<html ng-app="myApp">It serves as the collection of services, directives, filters, controllers and configuration information.
- We will then reference it on our page to connect our module and ng-app directive
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/myApp.js"></script>
Controller
var homeController = myApp.controller("homeController ", function ($scope) {
// some controller logic
}
);
- Using a controller function allows us to register the controller’s name and the constructor function.
- We should update our view to use the controller that we’ve created. Make sure that the controller name is the same as the controller name that we referenced on our view file.
<body ng-controller="homeController">
- To reference a controller from a view, AngularJS uses ‘ng-controller’ directive.
Model
The $scope that we’ve injected from the controller’s code snippet can be used as the model directly.
For example we can do,
In the view, we can now bind the value of the content
<div ng-view>
<div id="content">{{ content }}</div>
</div>
- AngularJS provides two-way data binding where we can use the values we defined in our scope anywhere in our view as long as the name we defined in our view is the same as the name of the value we used in our view. With this kind of pattern, we can inject JSON mock up data into our HTML view which also makes testing very easy.
- Our view can now display the information or the value of our scope that makes our view values dynamic and not hard coded.
SPA (Single-Page Applications) – AngularJS' main purpose is to create a SPA (Single-Page Applications) project. It makes our application look smooth in the browser. With SPA, our application will be faster as most resources (CSS, HTML, Scripts) are only loaded once throughout our application’s lifetime—only data is transmitted back and forth. It is also effective in using local storage and caching.
Templates – AngularJS uses a plain HTML template. The HTML is extended to contain information on how the model should be projected in the view. With this approach, designers can mark up their HTML like they normally would and then developers can bind functions with less effort.
Example.
In our controller.
function BlogCtrl($scope) {
scope.blogPost = [
{"title":"My First Post", "content":"This is my First Post"},
{"title":"My Second Post", "content":"This is my Second Post"},
{"title":"My Third Post", "content":"This is my First Post"},
];
}In our View
<div ng-controller="BlogCtrl">
<ul>
<li ng-repeat="post in blogPost"><img ng-src="{{post.title}}" alt="{{post.content}}"></li>
</ul>
</div>
- In the above example, we use the ng-app directive to loop through the blogPost array and populate what is essentially a Blog Post template.
Dependency Injection - AngularJS also has a built-in dependency injection technology. It allows us to ask for dependency rather than look for them and make it your own.
Example.
function AddCtrl($scope, $location) {
// Some controller logics here
}
- On the above example, we can easily access AngularJS services by adding the said service as a parameter.
Directives – an extend HTML in which new attributes can be used for creating HTML tags and decorating elements that manipulate DOM attributes and offers functionality of your application.
Example
Controller
angular.module('sampleDirective', [])
.controller('userController', ['$scope', function($scope) {
$scope.user = {
name: 'Kobe',
lastname:’Bryant’
};
}])
.directive('userInfo', function() {
return {
template: 'Name: {{ user.name}} LastName: {{ name.lastname}}'
};
});
View
<div ng-controller="'userController'">
<div user-info></div>
</div>
- In the above example, we’ve created a directive that replaces its contents with a static template.
Animations – AngularJS also provides ways to add effects and animations to your applications. It gives transformation on your HTML elements providing some animated transitions.
Example
CSS file
div {
transition: all linear 0.5s;
background-color: green;
height: 200px;
width: 50%;
position: relative;
top: 0;
left: 0;
}
.ng-hide {
height: 0;
width: 0;
left: 1000px;
}
HTML file
(Make sure to include above CSS file)
<!DOCTYPE html>
<html>
<body ng-app="ngAnimate">
Slide left and hide <input type="checkbox" ng-model="myCheck"></h1>
<br/>
<div ng-hide="myCheck"></div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
</html>
- The code above will show a check box and a box. When the check box is toggled a box will appear and disappear.
- This is just a simple animation but there are lots of animations that we can apply to our web application using AngularJS.
Conclusion
The above advantages are just some of the basic ideas on why AngularJS should be the next generation framework to build your next application. There are a lot of things that AngularJS can offer that web developers will surely love to know and learn.
Top DiscoverSDK Experts
Meir Rabinovich
Real time and embedded developer
Hardware and RT | General Libraries and 5 more
View Profile
Interested in becoming a DiscoverSDK Expert? Learn more
X
Compare Products
Select up to three two products to compare by clicking on the compare icon () of each product.
{{compareToolModel.Error}}Now comparing:
{{product.ProductName | createSubstring:25}} X
{{CommentsModel.TotalCount}} Comments
Your Comment