Home > Developer > Web Develop
Angularjs was born in 2009 and was created by Misko Hevery, who was later acquired by Google. is a good front-end JS framework, has been used in several Google products. Angularjs has many features, the core of which is MVVM, modularity, automated bidirectional data binding, semantic tagging, dependency injection, and more.
The first contact angularjs about six months ago to develop a public number, deeply attracted by his characteristics, the following will introduce the use of Require+angularjs to build a large single-page application.
Here is the project structure:
Here's a look at the structure of index.html:
<!doctype html><div class= "Container" ui-view></div> here we use Ui-view instead of Ng-view, in order to solve the problem of routing nesting, interested please know for yourself.
<script data-main= "Js/main.js" src= "Js/lib/requirejs/require.js" ></script> main.js is our entry file, see how his structure.Require.config ({//config total path baseurl: "Js/scripts", Paths: {///other modules will depend on him ' ui.route ': '). /lib/angular-plugins/angular-ui-router/angular-ui-router.min ', ' angular ': '. /lib/angular/angular ', ' angular-route ': '. /lib/angular-route/angular-route ', ' angularamd ': '. /lib/angular-plugins/angularamd ', ' css ': '. /lib/requirejs/css.min ', ' jquery ': '. /lib/jquery.min ', ' ueditorconfig ': '. /lib/ueditor/ueditor.config ', ' ueditorall ': '. /lib/ueditor/ueditor.all.min ', ' wdatepicker ': '. /lib/my97datepicker/wdatepicker ', ' blockui ': '. /lib/angular-plugins/angular-block-ui/angular-block-ui ', ' ngload ': '. /lib/angular-plugins/ngload ', ' ui-bootstrap ': '. /lib/angular-plugins/angular-ui-bootstrap/ui-bootstrap-tpls-0.12.1.min ', ' angular-sanitize ': '. /lib/angular-plugins/angular-sanitize.min '},shim: {//indicates that the module relies on angular ' angularamd ': [' angular '], ' angular-route ': [' Angular '], ' ui.route ': [' angular '], ' ueditorconfig ': [' jquery '], ' ueditorall ': [' jquery '], ' wdatepicker ': [' jquery '], ' Ui-bootstrap ': [' angular '], ' blockui ': [' Angular ', ' angular-sanitize ': [' angular ']},urlargs: ' v= ' + new Date (). GetTime (),//Startup program Js/scripts/app.jsdeps : [' app ']});Now look at App.js.
define ([' Routes ', ' loader ', ' angularamd ', ' ui-bootstrap ', ' angular-sanitize ', ' Blockui ', ' ui.route '), Function (config , LOADER,ANGULARAMD) {var app = Angular.module ("WebApp", [ ' ngsanitize ', ' ui.bootstrap ', ' Ui.router ']), app. Config ( function ($stateProvider, $urlRouterProvider) {//Configure the route if (config.routes! = undefined) {Angular.foreach (config.routes, function (route, path) {$stateProvider. State (Path, {Templateurl:route.templateurl,url:route.url,resolve:loader ( route.dependencies),//AllowAnonymous:route.allowAnonymous});}); Default route if (config.defaultroute! = undefined) {$urlRouterProvider. When ("", Config.defaultroute);}}) Return Angularamd.bootstrap (APP);});Take a look at our routing file Routes.js
return {defaultroute: '/form ', routes: {' form ': {templateurl: ' views/form.h tml ', url: '/form ', dependencies: [' Controller/formcontroller '], Allowanonymo Us:true}, ' form.required ': {templateurl: ' views/form-required.html ', URL: '/required ', dependencies: [], allowanonymous:true}, ' Form.op tional ': {templateurl: ' views/form-optional.html ', url: '/optional ', Depende Ncies: [], allowanonymous:true}, ' Form.confirm ': {templateurl: ' VI ews/form-confirm.html ', url: '/confirm ', dependencies: [], ALLOWANONYMOUS:TR UE}, ' login ': {templateurl: ' views/login.html ', url: '/login ', dependencies: [COntroller/formcontroller], Allowanonymous:true}};});Used to a loader.js.
define ([], function () { return function (dependencies) { var definition = { resolver: [' $q ', ' $rootScope ', function ($q, $rootScope) { var defered = $q. Defer (); Require (dependencies, function () { $rootScope. $apply (function () { defered.resolve (); }); }); return defered.promise; }] }; return definition; }});So far the basic setup is complete, so let's look at the controller structure.
Define ([' App ', ' service/loginservice '], function (APP) {app.controller (' Logincontroller ', function ($scope, $location , Loginservice) {$scope. Login = function () {//Get user name var name = $scope. Admin.name;var Password = $scope. Admin.password;var data = {"Name": Name, "password": Password}loginservice.login ("/web/admin/login", data,function (data) {Console.log ( (data);});});If you need to use a service like a Java guide, then you can use services, as well as directives and filters.
Look at the login.html page
<div class= "Container" ng-controller= "Logincontroller" > <div class= "col-md-6 col-md-offset-2" > <d IV class= "Panel Panel-default" > <div class= "panel-heading" >Note plus the Ng-controller directive
OK, let's visit the page.
Well, it's almost done by now.
I rookie a, have questions welcome point, I qq:821196632, welcome to discuss technology together.
demo:http://download.csdn.net/detail/qq_27195003/9229013
Requirejs+angularjs Building Spa Page App
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
