Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the method of building an Angular project?" in the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

(1) build Angular directly without requirejs

The reason for building angular directly without using requirejs is that angular can do this in terms of dependency management and angular usage scenarios. First of all, angular dependency injection is a good thing, students who do not understand can search for information. To put it simply, when I need a module, I don't care where it is or what it is. All I have to do is know its name and tell angular. As for how to pass its object and how to find it, angular will deal with it.

Angular.module ('myApp', [' ngRoute',])

For example, the ngRoute here, I need to know where and where the ngRoute came from. As long as there is a module defined as ngRoute, I can use it directly.

Given that Angular is so powerful, the rest is easy. We only need to divide the file into module from both functional and business aspects, then reference all the library files on the page through the script tag, and then merge all the business files, that is, our own js, into an all.js and load it on the page.

The division of the files here follows the official recommendation of angular:

| |-- js |-- app.js / / app startup file | For app configuration |-- controllers.js / / controllers means to store our own business files |-- directives.js / / instruction files (instructions can be shared) |-- fliters.js / / filter files (filters can be shared) |-- services.js / / service files (can be shared Usually the service that interacts with the server) |-- partials |-- html1.html |-- html2.html |-- index.html

App.js

Use strict'; / / Declare app level module which depends on filters, and services angular.module ('myApp', [' ngRoute', 'myApp.filters',' myApp.services', 'myApp.directives',' myApp.controllers']). Config (['$routeProvider', function ($routeProvider) {$routeProvider.when ('/ view1', {templateUrl: 'partials/partial1.html', controller:' MyCtrl1'}); $routeProvider.when ('/ view2', {templateUrl: 'partials/partial2.html', controller:' MyCtrl2'}); $routeProvider.otherwise ({redirectTo:'/ view1'});}])

Controllers.js

'use strict'; / * Controllers * / angular.module (' myApp.controllers', []) .controller ('MyCtrl1', [' $scope', function ($scope) {}]) .controller ('MyCtrl2', [' $scope', function ($scope) {}])

Directives.js

'use strict'; / * Directives * / angular.module ('myApp.directives', []). Directive ('appVersion', [' version', function (version) {return function (scope, elm, attrs) {elm.text (version);};}])

Filters.js

'use strict'; / * Filters * / angular.module ('myApp.filters', []). Filter ('interpolate', [' version', function (version) {return function (text) {return String (text). Replace (/\% VERSION\% / mg, version);};}])

Services.js

'use strict'; / * Services * / / Demonstrate how to register services / / In this case it is a simple value service. Angular.module ('myApp.services', []). Value ('version',' 0.1')

Index.html

My AngularJS App view1 view2 Angular seed app: v

Thus, without using requirejs, the project is built. One of several additional points is that you can continue to split controllers into multiple controller modules, which can be divided entirely according to your business. For example, userController under the user directory and so on. Then merge all these self-written files through grunt or gulp into a separate total file all.js so that in addition to the library file on the page as long as this one file on the page. the advantage of module is that such merged files do not care about the order of js merge, because it is injected through angular dependency.

(2) build through requirejs

The construction in this way may be clearer to some people, and the structure is the same as above, with an additional man.js to configure requirejs, a separate routes.js and a controller folder to split the controller one by one through requirejs, and load asynchronously as needed.

Index.html

Angular-RequireJS sample app AngularJS + RequireJS View 1 View 2

Main.js

Require.config ({paths: {angular:'.. / bower_components/angular/angular', angularRoute:'.. / bower_components/angular-route/angular-route', angularMocks:'.. /.. / bower_components/angular-mocks/angular-mocks', text:'.. /.. / bower_components/requirejs-text/text'} Shim: {'angular': {' exports':'angular'}, 'angularRoute': [' angular'], 'angularMocks': {deps: [' angular'], 'exports':'angular.mock'}}, priority: ["angular"]}) / / http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap window.name = "NG_DEFER_BOOTSTRAP!"; require (['angular',' app', 'routes'], function (angular, app, routes) {' use strict'; var $html = angular.element (document.getElementsByTagName ('html') [0]) Angular.element () .ready (function () {angular.resumeBootstrap ([app ['name']]);})

App.js

Define (['angular',' filters', 'services',' directives', 'controllers',' angularRoute',], function (angular, filters, services, directives, controllers) {'use strict' / / Declare app level module which depends on filters, and services return angular.module ('myApp', [' ngRoute', 'myApp.controllers',' myApp.filters', 'myApp.services',' myApp.directives'];})

Controllers.js

Define (['angular',' services'], function (angular) {'use strict'; / * Controllers * / return angular.module (' myApp.controllers', ['myApp.services']) / / Sample controller where service is being used .controller (' MyCtrl1', ['$scope', 'version', function ($scope, version) {$scope.scopedAppVersion = version) }]) / / More involved example where controller is required from an external file .controller ('MyCtrl2', [' $scope','$injector', function ($scope, $injector) {require (['controllers/myctrl2']) Function (myctrl2) {/ / injector method takes an array of modules as the first argument / / if you want your controller to be able to use components from / / any of your other modules, make sure you include it together with 'ng' / / Furthermore we need to pass on the $scope as it's unique to this controller $injector.invoke (myctrl2, this, {' $scope': $scope}) });}])

Directives.js

Define (['angular',' services'], function (angular, services) {'use strict'; / * Directives * / angular.module (' myApp.directives', ['myApp.services']) .directive (' appVersion', ['version', function (version) {return function (scope, elm, attrs) {elm.text (version);};}]) })

Filters.js ‍

Define (['angular',' services'], function (angular, services) {'use strict'; / * Filters * / angular.module (' myApp.filters', ['myApp.services']) .filter (' interpolate', ['version', function (version) {return function (text) {return String (text). Replace (/\% VERSION\% / mg, version)) };}])

Routes.js

Define (['angular',' app'], function (angular, app) {'use strict'; return app.config ([' $routeProvider', function ($routeProvider) {$routeProvider.when'/ view1', {templateUrl: 'app/partials/partial1.html', controller:' MyCtrl1'}) $routeProvider.when ('/ view2', {templateUrl: 'app/partials/partial2.html', controller:' MyCtrl2'}); $routeProvider.otherwise ({redirectTo:'/ view1'});}];})

Services.js

Define (['angular'], function (angular) {' use strict'; / * Services * / / Demonstrate how to register services / / In this case it is a simple value service. Angular.module ('myApp.services', []) .value (' version', '0.1');})

A separate controlle file in the controllers folder, myCtrl2.js

Define ([], function () {return ['$scope','$http', function ($scope, $http) {/ / You can access the scope of the controller from here $scope.welcomeMessage = 'hey this is myctrl2.jsgiving' / / because this has happened asynchroneusly we've missed / / Angular's initial call to $apply after the controller has been loaded / / hence we need to explicityly call it at the end of our Controller constructor $scope.$apply ();}];}); this is the end of the content of "what is the method of building the Angular project". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.