Angularjs Dynamic loading module and dependency injection detailed _angularjs

Don't say much nonsense, get to the point ...

First we look at the file structure:

Angular oclazyload -- demo folder
Scripts - Framework and plug-in folder
Angular-1.4.7 --- angular does not explain
Angular UI router -- uirouter does not explain
Oclazyload -- oclazyload does not explain
Bootstrap -- bootstrap does not explain
Angular tree control master --- the angular tree control master does not explain
Ng table -- ng table does not explain
Angular bootstrap -- angular bootstrap does not explain
JS -- JS files written by JS folder for demo
Controllers - Page controller folder
Angular tree control.js --- angular tree control controller code
Default.js --- default controller code
Ng table.js --- ng table controller code
App.config.js -- module registration and configuration code
Oclazload.config.js -- load module configuration code
Route.config.js -- route configuration and loading code
Views --- HTML page folder
Angel Tree control.html --- the effect page of the angel tree control plug-in
Default.html --- default page
Ng table.html --- ng table plug-in effect page
UI bootstrap.html --- UI bootstrap plug-in effect page
Index.html - main page

Note: This demo does not do nested routines, just simple implementation of a single view of the route to show the effect.

Let's look at the main page code:

In this page, we only loaded the bootstrap CSS, angular js, Ui-router js, Oclazyload JS, as well as 3 of the configuration of JS files.
Take a look at the HTML code for four pages:

Angular-tree-control Effects Page

<treecontrol tree-model= "Ngtree.treedata" class= "Tree-classic ng-cloak" options= "ngtree.treeOptions" >
  { Node.title}}
</treecontrol>

There is a directive on the page that uses the plugin.

Default page

<div class= "Ng-cloak" >
  {{default.value}}
</div>

Here we are just proving to load and properly execute default.js.

Ng-table Effects Page

<div class= "Ng-cloak" >
  <div class= "p-h-md p-v bg-white box-shadow pos-rlt" >
    

<span uib-dropdown class= "Ng-cloak" >
  <a href id= "simple-dropdown" uib-dropdown-toggle> dropdown
    box triggers
  </a>
  <ul class= "Uib-dropdown-menu dropdown-menu" aria-labelledby= "Simple-dropdown" >
    The dropdown box content. Here is an effect to prove the dynamic load can be implemented
  </ul>
</span>
								

Only a dropdown box effect is written here, proving that the plug-in is loaded correctly and used.
Well, after reading the HTML, let's look at the load configuration and routing configuration:

"Use strict"
var Tempapp = angular.module ("Templateapp", ["Ui.router", "Oc.lazyload"])
. config (["$provide", " $compileProvider "," $controllerProvider "," $filterProvider ",
        function ($provide, $compileProvider, $ Controllerprovider, $filterProvider) {
          Tempapp.controller = $controllerProvider. Register;
          tempapp.directive = $compileProvider. Register;
          Tempapp.filter = $filterProvider. Register;
          Tempapp.factory = $provide. Factory;
          Tempapp.service = $provide. Service;
          Tempapp.constant = $provide. Constant
        }]);

The above code on the module registration, relying only on ui.router and Oc.lazyload. Configuration is also simply configured the module, so that in the back of JS can identify the method on the Tempapp.
Then we'll look at the configuration of the Oclazyload loading module:

"Use strict"
Tempapp
. Constant ("Modules_config", [
  {
    name: "Ngtable",
    module:true,
    files: [
      "Scripts/ng-table/dist/ng-table.min.css",
      "Scripts/ng-table/dist/ng-table.min.js"
    ]
  },
  {
    name: "Ui.bootstrap",
    module:true,
    files:[
      "scripts/angular-bootstrap/ Ui-bootstrap-tpls-0.14.3.min.js "
    ]
  },
  {
    name:" Treecontrol ",
    module:true,
    files:[
      "Scripts/angular-tree-control-master/css/tree-control.css",
      "scripts/angular-tree-control-master/css/ Tree-control-attribute.css ",
      " Scripts/angular-tree-control-master/angular-tree-control.js "
    ]
  }
])
. Config (["$ocLazyLoadProvider", "Modules_config", Routefn]);
function Routefn ($ocLazyLoadProvider, modules_config) {
  $ocLazyLoadProvider. Config ({
    debug:false),
    Events:false,
    modules:modules_config
  });

Configuration of Routes:

"use strict"
tempApp.config(["$stateProvider","$urlRouterProvider","$locationProvider",routeFn]);
function routeFn($stateProvider,$urlRouterProvider,$locationProvider){
  $urlRouterProvider.otherwise("/default");
  $stateProvider
  .state("default",{
    url:"/default",
    views:{
      "":{
        templateUrl:"views/default.html",
        controller:"defaultCtrl",
        controllerAs:"default"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("js/controllers/default.js");
      }]
    }
  })
  .state("uibootstrap",{
    url:"/uibootstrap",
    views:{
      "":{
        templateUrl:"views/ui-bootstrap.html"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ui.bootstrap");
      }]
    }
  })
  .state("ngtable",{
    url:"/ngtable",
    views:{
      "":{
        templateUrl:"views/ng-table.html",
        controller:"ngTableCtrl",
        controllerAs:"ngtable"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ngTable").then(
          function(){
            return $ocLazyLoad.load("js/controllers/ng-table.js");
          }
        );
      }]
    }
  })
  .state("ngtree",{
    url:"/ngtree",
    views:{
      "":{
        templateUrl:"views/angular-tree-control.html",
        controller:"ngTreeCtrl",
        controllerAs:"ngtree"
      }
    },
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("treeControl").then(
          function(){
            return $ocLazyLoad.load("js/controllers/angular-tree-control.js");
          }
        );
      }]
    }
  })
};

Ui-bootstrap dropdown box Simple implementation does not require a controller, then we will only look at the ng-table and Angular-tree-control Controller JS Bar:

Ng-table.js

(function () {
"Use strict"
TempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
var vm = this;
/ / data
var data = [{ name: "Moroni", age: 50 },
{ name: "Tiancum ", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 },
{ name: "Tiancum", age: 43 },
{ name: "Jacob", age: 27 },
{ name: "Nephi", age: 29 },
{ name: "Enos", age: 34 }];
VM. Tableparams = new ngtableparams (/ / merge default configuration and URL parameters
angular.extend({
Page: 1, / / first page
Count: 10, / / amount of data per page
Sorting: {
Name: 'ASC' / / default sorting
}
}
$location.search())
{
Total: data.length, / / total data
getData: function ($defer, params) {
$location. Search (params. Url()); / / put the parameters on the URL, and the refresh page will not jump back to the first page and the default configuration
var orderedData = params.sorting ?
$filter('orderBy')(data, params.orderBy()) :data;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
}
);
}
} ();

angular-tree-control.js

(function () {
"Use strict"
TempApp
.controller("ngTreeCtrl",ngTreeCtrlFn);
function ngTreeCtrlFn(){
var vm = this;
/ / tree data
vm.treeData = [
{
Id: "1",
Title: "label1",
ChildList:[
{
Id: "1-1",
Title: "child 1",
ChildList:[
{
Id: "1-1-1",
Title: "sub level 1",
ChildList:[]
}
]
}
{
Id: "1-2",
Title: "child 2",
ChildList:[
{
Id: "1-2-1",
Title: "sub level 2",
ChildList:[
{
id:"1-2-1-1",
Title: "sub level 1 again",
ChildList:[]
}
]
}
]
}
{
Id: "1-3",
Title: "child 3",
ChildList:[]
}
]
}
{
Id: "2",
Title: "label2",
ChildList:[
{
Id: "2-1",
Title: "child 1",
ChildList:[]
}
{
Id: "2-2",
Title: "child 2",
ChildList:[]
}
{
Id: "2-3",
Title: "child 3",
ChildList:[]
}
]
,
{
Id: "3",
Title: "label3",
ChildList:[
{
Id: "3-1",
Title: "sub level 1",
ChildList:[]
}
{
Id: "3-2",
Title: "child 2",
ChildList:[]
}
{
Id: "3-3",
Title: "child 3",
ChildList:[]
}
]
}
];
/ / tree configuration
vm.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
}
}
} (); 

Let us ignore Default.js, after all, there is only a "Hello wrold".

The above is the entire content of this article, I hope to help you learn.