Requirejs+angularjs Building Spa Page App

Source: Internet
Author: User

Label:

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><html lang= "en" ><head><meta charset= " Utf-8 "><meta name=" viewport "content=" Width=device-width, initial-scale=1.0 "/><meta charset=" Utf-8 "/ ><meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/><title>app admin </title>< Link href= "./js/lib/bootstrap.min.css" rel= "stylesheet" ><link href= "./js/lib/ueditor/themes/default/css/ Ueditor.min.css "></head><body><!--Routing interface--><div class=" container "ui-view></div> <!--using require to load JS--><script data-main= "js/main.js" src= "Js/lib/requirejs/require.js" ></script> <!--<script type= "Text/javascript" src= "./lib/jquery.min.js" ></script>--><!--<script type = "Text/javascript" src= "./lib/bootstrap.min.js" ></script>--></body></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" > <h3 class= "Panel-title" & gt; login </h3> </div> <div class= "Panel-body" > <form class= "Form-hor Izontal "> <div class=" Form-group "> <label for=" inputEmail3 "class=" C                            Ol-sm-2 Control-label "> User name </label> <div class=" col-sm-10 "> <input type= "Email" class= "Form-control" id= "inputEmail3" placeholder= "username" > </div&                    Gt </div> <div class= "Form-group" > <label for= "InputPassword3" class                         = "Col-sm-2 Control-label" > Password </label> <div class= "col-sm-10" >   <input type= "Password" class= "Form-control" id= "inputPassword3" placeholder= "password" > &L t;/div> </div> <div class= "Form-group" > <di                                V class= "Col-sm-offset-2 col-sm-10" > <div class= "checkbox" > <label> <input type= "checkbox" > Remember me &lt                    ;/label> </div> </div> </div>                            <div class= "Form-group" > <div class= "col-sm-offset-2 col-sm-10" > <button type= "Submit" class= "btn btn-default" > Login </button> &lt ; a class= "btn btn-link" href= "#/register" > Registration </a> </div> </div&                Gt </form> </div> </div> </div></div> 

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: