ANGULARJS Architecture Building1. Build Angularjs Project1) Configure the following in Package.json, then npm install download package {"name": "Angularjst","version": "1.0.0"," description": "Wheels"," Author": "Dengwh","Private": true,"dependencies": {" angular": "^1.6.0"," angular-ui-router": "0.3.2"," Bootstrap": "3.3.7"," Es5-shim": "4.5.9"," Html5shiv": "3.7.3"," jquery": "3.1.1"," Requirejs": "2.3.2","text": "2.0.15"," Urijs": "1.18.4"," Webuploader": "0.1.8"," angular-ui-tree": "2.22.2"," Angular-async-loader": "1.3.2 " }} 2) Add the Bootstrap.js file with the following content Require.config ({Map: {' * ': {' ie8css ': './node_modules/requirecss-branch-seagull2/ie8css.min ',' CSS ': './node_modules/requirecss-branch-seagull2/css.min ' } },waitseconds:0,//Configure the path of the angularpaths: {' angular ': './node_modules/angular/angular ',' angular-ui-router ': './node_modules/angular-ui-router/release/angular-ui-router.min ',' angular-ui-tree ': './node_modules/angular-ui-tree/dist/angular-ui-tree.min ',' angular-async-loader ': './node_modules/angular-async-loader/angular-async-loader ', ' jquery ': './node_modules/jquery/dist/jquery.min ',' webuploader ': './node_modules/webuploader/dist/webuploader ',' Urijs ': './node_modules/urijs/src ', },//configuration introduces dependent package nameShim: {' angular ': {exports: ' angular '},' Angular-ui-router ': {deps: [' angular ']},' Angular-ui-tree ': {deps: [' angular ', ' css!. /node_modules/angular-ui-tree/dist/angular-ui-tree.min ']}, }}); require ([' angular ', ' webuploader ', './javascript/app-routes '),function (angular, webuploader) {angular.element (document). Ready (function () {Angular.bootstrap (document, [' app ']);angular.element (document). Find (' HTML '). addclass (' Ng-app '); });window. Webuploader = Webuploader; }); 3) Add the App.js file with the following content define (function (Require, exports, module) {var angular = require (' angular ');var asyncloader = require (' Angular-async-loader '); require (' angular-ui-router '); var app = Angular.module (' app ', [' ui.router ']); asyncloader.configure (app);module.exports = app;}); 4) Add the App-routes.js file with the following content, note that a page corresponds to a route define (function (require) {var app = require (' Javascript/app '); App. Config ([' $stateProvider ', ' $urlRouterProvider ', function ($stateProvider, $urlRouterProvider) {//Default Jump Home$urlRouterProvider. Otherwise ('/'); //Home$stateProvider. State (' Login ', {URL: '/',templateurl: './views/login.html ',controller: ' Login_controller ',controllerurl: './controller/login-controller.js ' }); //Personal Information page$stateProvider. State (' Login.information ', {URL: ' Information/:id ',templateurl: './views/info/information.html ',controller: ' Information_controller ',controllerurl: './controller/info/information-controller.js ' }); }]);}); 5) In the Total template page, add Data-ui-view, the content is as follows \ <! DOCTYPE html> <meta charset= "Utf-8" ><meta http-equiv= "x-ua-compatible" content= "Ie=edge" ><meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" ><!--the above 3 meta tags * must be * placed first, and any other content * must be * followed thereafter! -<title>Angularjsdemo</title><!--Bootstrap --<link href= "./node_modules/bootstrap/dist/css/bootstrap.min.css" rel= "stylesheet"/> <body><div data-ui-view style= "MARGIN-LEFT:AUTO;MARGIN-RIGHT:AUTO;WIDTH:80%;MIN-WIDTH:768PX;" > </div> <script src= "./node_modules/requirejs/require.js" ></script><script src= "./javascript/bootstrap.js" ></script></body> 6) In the Project template page, add the following class, must be added, no internal files found <div><div class= "content-main-right pull-left data-ui-view" style= "padding:0;float:left;width:80%;min-width:768p x; " > </div></div> 7) Other content is added under this class, if you add more than one template page, add Class to class
ANGULARJS Environment Construction
