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
- RestFul : actions are quickly becoming the standard for communicating from the server to the client. In One line of JavaScript you can quickly talk to the server and get the data you need to interact with your web pages. AngularJS turns this into a simple JavaScript object , as Models
- 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 selectionsControllers : 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.for More detail AngularJSIn 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>
In
my backend I'm used Spring Restful for more detail
@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>
- We’ve reviewed how Google came to develop this framework as a way to make the most of HTML.
Merci pour ce post qui sera, je l'espère, le premier d'une longue série.
ReplyDeleteJe suis absolument d'accord avec toi sur l'avenir de ce framework.
nice post, can you share it through git?
ReplyDeleteGit hub will be nice yes
DeleteCode?
ReplyDelete