AngularJS Starter
AngularJs : similar to
Backbone or JavaScriptMVC is complete solution for rapid front-end
development . No other plugins or frameworks are necessary to build a
data-driven web application It's developed by Google , that assists
with running single-page applications. Its goal is to argument
browser-based applications with model-view-controller(MVC)
capability, in effort to make both developement and test easier.
Advantages AngularJS
MVVM to Rescue
Models talk to ViewModel objects (through something called the
$scope object),which listen for changes to the Models. These
can then be delivered and rendered by the Views, which is the HTML
that expresses your code.
Data Binding and Dependency
Injection . Everything in the MVVM pattern is communicated
automatically across the UI whenever anything changes. The elimantes
the nedd for wrappers getters/setters or class declarations.
AngularJs handles all of this so you can express your data as simply
as with JavaScript primitives , like arrays or as complex as you
wish , through custom types.
Entreprise-level Testing :
As stated above , Angular Js requires no additional frameworks or
plugins including testing if you're familar with projects like Qunit
,Mocha or Jasmine.
AngularJS is JavaScriptMVC architecture than her code is
always organized into models,views,controllers and (optionally)
services :
Models :are JavaScript objects
that represent the data application can access.
Views : they are responsible for
representing the data from models to the user in a visual and
useful format.and intercept generic user
interactions-including clicks and option list selections
Controllers : define the actual
behavior of your application and play key rôle in connecting the
right models to the right views.
Services : are specialized objects that
perform work on behalf of other objects.
In my example I'm developed a simple crud I'm used to spring restful,spring data in my backend and Maven for managment dependencies and build project. you should install a MongoDB for this example
-
index.html
<html
lang="en"
ng-app="contacts">
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>My
AngularJS App</title>
<link
rel="stylesheet"
href="css/app.css"
/>
<link
rel="stylesheet"
href="css/bootstrap/bootstrap-responsive.min.css"
/>
<link
rel="stylesheet"
href="css/bootstrap/bootstrap.min.css"
/>
</head>
<body>
<div
class="navbar
navbar-fixed">
<div
class="navbar-inner">
<ul
class="nav">
<li><a
href="#/contact-list">Liste contacts</a></li>
<li><a
href="#/contact-creation">Create
contact</a></li>
</ul>
</div></div>
<div
ng-view></div>
<script
src="js/bootstrap/bootstrap.js"/>
<script
src="js/jquery/jquery-2.0.3.js"></script>
<script
src="lib/angular/angular.js"></script>
<script
src="lib/angular/angular-resource.js"></script>
<script
src="js/app.js"></script>
<script
src="js/services.js"></script>
<script
src="js/controllers.js"></script>
<script
src="js/filters.js"></script>
<script
src="js/directives.js"></script>
</body>
</html>
app.js
//
Declare app level module which depends on filters, and
services
angular.module('contacts',
['contacts.filters',
'contacts.services',
'contacts.directives',
'contacts.controllers']).
config(['$routeProvider',
function
($routeProvider) {
,,,,,,,,,,,,,,
$routeProvider.when('/contact-detail/:id',
{templateUrl: 'partial/contact-detail.html',
controller: 'ContactDetailCtrl'});
,,,,,,,,,,,,,,,,,,,,
}]);
controllers.js
var
app=angular.module('contacts.controllers',[]);
});
app.controller('ContactListCtrl',['$scope','ContactsFactory','ContactFactory','$location','$log',function($scope,ContactsFactory,ContactFactory,$location,$log){
$scope.deleteContact=function(id)
{
,,,,,,,,,,,,,,,,
$scope.editContact=function(id){
$location.path('/contact-detail/'+id);
};
$scope.createNewContact=function(){
$location.path('/contact-creation');
};
$scope.contacts=ContactsFactory.query();
}]);
…............
services.js
var
services=angular.module('contacts.services',['ngResource']);
services.factory('ContactsFactory',function($resource){
return
$resource('http://example.com/contacts',{},{
query:{method:'GET',isArray:true},
create:{method:'POST'}
})
});
contact-creation.html
<div
class="container">
<h1>Create
a new Contact</h1>
<form
novalidate="novalidate"
class="form-horizontal">
<div
class="control-group">
<label
class="control-label"
for="inputFirstName">First
name:</label>
<div
class="controls">
<input
type="text"
id="inputFirstName"
ng-model="contact.firstName"
placeholder="First
name"/>
</div>
</div>
<div
class="control-group">
<label
class="control-label"
for="inputLastName">Last
name:</label>
<div
class="controls">
<input
type="text"
id="inputLastName"
ng-model="contact.lastName"
placeholder="Last
name"/>
</div>
</div>
<div
class="control-group">
<label
class="control-label"
for="inputEmail">E_mail:</label>
<div
class="controls">
<input
type="text"
id="inputEmail"
ng-model="contact.email"
placeholder="E_mail"
required/>
</div>
</div>
<div
class="control-group">
<div
class="controls">
<a
ng-click="createNewContact()"
class="btn
btn-small btn-primary">create
new contact</a>
</div>
</div>
</form>
</div>
….......
contact-list.html
<div
ng-controller="ControlerContactCtrl" >
<table
class="table
table-striped" >
<thead>
<tr>
<th>First
name</th>
<th>Last
name</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr
ng-repeat="contact
in contacts">
<td>{{
contact.firstName }}</td>
<td>{{
contact.lastName }}</td>
<td><a
ng-click="editContact(contact.id)"
class="btn
btn-small btn-primary">edit</a></td>
<td><a
ng-click="deleteContact(contact.id)"
class="btn
btn-small btn-danger">delete</a></td>
</tr>
</tbody>
</table>
</div>
@Controller
public
class
ContactRestComponent {
@Resource
public
EContactsServices eContactsServices;
@RequestMapping(value
= "/contacts",
method = RequestMethod.GET)
@ResponseBody
public
List<EContacts> getAllContacts() {
return
eContactsServices.getAllEContacts();
}
@RequestMapping(value
= "/contacts/{id}",
method = RequestMethod.GET,
produces = "application/json")
@ResponseBody
public
EContacts getContactById(@PathVariable("id")
String id) {
return
eContactsServices.getEcontactById(id);
}
,,,,,,,,,
}
In
my pom.xml
<project
xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>mycompany.org.contacts</groupId>
<artifactId>AngularJs-starter</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<properties>
<java-version>1.6</java-version>
<org.springframework-version>3.2.1.RELEASE</org.springframework-version> <org.slf4j-version>1.6.6</org.slf4j-version>
<spring.data.version>1.3.2.RELEASE</spring.data.version>
<mongo-java-driver.version>2.11.1</mongo-java-driver.version>
<commons-lang3.version>3.1</commons-lang3.version>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.codehaus.jackson</groupId>
<artifactId>jackson-mapper-asl</artifactId>
<version>1.9.8</version>
</dependency>
<dependency>
<artifactId>spring-context</artifactId>
<groupId>org.springframework</groupId>
<version>${org.springframework-version}</version>
</dependency>
<dependency>
<artifactId>spring-web</artifactId>
<groupId>org.springframework</groupId>
<version>${org.springframework-version}</version>
</dependency>
<dependency>
<artifactId>spring-webmvc</artifactId>
<groupId>org.springframework</groupId>
<version>${org.springframework-version}</version>
</dependency>
<!--
Logging -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>${org.slf4j-version}</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>jcl-over-slf4j</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>${org.slf4j-version}</version>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.15</version>
<exclusions>
<exclusion>
<groupId>javax.mail</groupId>
<artifactId>mail</artifactId>
</exclusion>
<exclusion>
<groupId>javax.jms</groupId>
<artifactId>jms</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jdmk</groupId>
<artifactId>jmxtools</artifactId>
</exclusion>
<exclusion>
<groupId>com.sun.jmx</groupId>
<artifactId>jmxri</artifactId>
</exclusion>
</exclusions>
<scope>runtime</scope>
</dependency>
<!--
mongodb
java driver -->
<dependency>
<groupId>org.mongodb</groupId>
<artifactId>mongo-java-driver</artifactId>
<version>2.11.0</version>
</dependency>
<!--
Spring data mongodb
-->
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-mongodb</artifactId>
<version>1.2.0.RELEASE</version>
</dependency>
<!--
Unit
testing ======================================================
-->
</dependencies>
<build>
<finalName>AngularJs-starter</finalName>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.5.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
<compilerArgument>-Xlint:all</compilerArgument>
<showWarnings>true</showWarnings>
<showDeprecation>true</showDeprecation>
</configuration>
</plugin>
</plugins>
</build>
</project>
Conclusion :AngularJS is quickly becoming the dominant
JavaScript framework for professional web development.
