Home > Developer > Web Develop
Learn the basics about Angularjs and Requirejs
A simple example of the project directory is as follows:
-index.html
-scripts folder
--controller folder
---miancontroller.js
---controller1.js
---controller2.js
--directives folder
---maindirective.js
---directive.js
--app.js
--router.js
--main.js
Second, home
First of all, your index.html is probably the following
<!doctype html><!--<!--other HTML content--><script type= ' text/javascript ' src= '. /scripts/lib/require.js ' data-main= '. /scripts/main.js ' ></script></body>On the home page index.html only need to introduce the Requirejs library file, and indicate the entry function main.js, with the manual start Angularjs application, so there is no need to add ng-app= ' webApp ' to the homepage.
Third, configuration Mian.js
Require.config ({paths:{
Some library files' jquery ': '//cdn.staticfile.org/jquery/1.10.2/jquery.min ', ' Angular ': '//cdn.staticfile.org/angular.js/1.2.10/angular.min ', ' Angular-route ': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min ',' Domready ': '//cdn.staticfile.org/require-domready/2.0.1/domready.min ',
JS file
' Bootstrap ': ". /scripts/bootstrap ",
' App ': '. /scripts/app ",
' Router ': ". /scripts/router "
..... As well as other JS files, omitted here}, shim:{' Angular ': {exports:' Angular ' }, ' Angular-route ': {deps:[' Angular '], exports:' Angular-route ' }}, deps:[' Bootstrap '], Urlargs:"Bust=" + (NewDate ()). GetTime ()//prevent read cache, debug with});About the configuration in Require.config () is probably as follows (according to their own project situation, here I simply configured),
So the whole thing about main.js this file is: loading all files asynchronously by Requirejs
Notice the deps:[' Bootstrap ', which tells us to load the Bootstrap.js file first.
Iv. Manual start of the ANGULARJS application
And bootstrap.js is what I used to manually start the ANGULARJS application, the code is as follows
define ([' Require ', ' angular ', ' Angular-route ', ' jquery ', ' App ', ' router ' ],function(require,angular) { ' use strict '; Require ([' domready! '],function(document) { angular.bootstrap (document,[' WebApp "] );});Here depends on App.js and router.js, let's see what these two files do separately
Five, website routing settings
We use ui-router here. So our router.js should be like this, mainly used to define the route, about Ui-router configuration please check the relevant knowledge, here is simply skip
Define (["App"], function(APP) {returnApp.run ([' $rootScope ', ' $state ', ' $stateParams ', function($rootScope, $state, $stateParams) {$rootScope. $state=$state; $rootScope. $stateParams=$stateParams}]) . config (function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider) {//to jump to the top when changing state$uiViewScrollProvider. Useanchorscroll (); //Default entry First redirect$urlRouterProvider. Otherwise (' home '); $stateProvider. State (' Home ',{ //Abstract:true,URL: '/home ', Views: {' [Email protected] ': {templateurl:‘.. /view/home.html ' } } }) })Liu, Angular.module
At this point, we'll look at the usual writing Angularjs application.
var app = Angular.module ("xxx", ["XXX"]); App.controller ("foo",function($scope) {}); App.directive (...)So that's what our app.js should be.
define (["Angular", ' Maincontroller ', ' maindirective ' ),function (angular) { return angular.module ("WebApp", [' ui.router ', ' ngstorage ', ' ngsanitize ', ' webapp.controllers ', ' webapp.directive ');})The Maincontroller and maindirective that we rely on in our app.js are mainly used to load angular controllers and instructions.
Seven, the controller
That's what we maincontroller.js.
define ([' Controller1 ', ' controller2 '],function() {});It is used primarily to load individual controllers (all controllers will be loaded in this file), and not to do anything else, because we can have a lot of controller files and add them as needed.
Controller1.js file (similar to other controller controller2 files)
define (['.. /scripts/controller/module.js ', ' jquery '],function(controllers,$) { ' use strict '; Controllers.controller (' controller1 ',function($scope) { //controller's specific JS Code })})Which relies on module.js
and Module.js as follows
function (angular) { ' use strict '; return angular.module (' webapp.controllers ', []);});Viii. directives
Similarly miandirective.js is similar. Reference Controller
Ix. Other
How to integrate the ANGULARJS project with the Requirejs
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
