Angularjs dynamic loading module and dependent _angularjs

Recent project compare busy amount, day to work, evening back also need to do angular knowledge point ppt to colleagues, after all, the end of the year to resign, project follow-up development or need someone to take over, so occupy the evening study time. I had never intended to write these Third-party plug-in learning notes, but I felt it was a good thing to load the modules on demand and use them successfully. Based on the beast did not how deep use of Requirejs, so the beast does not know what the difference between this and Requirejs, also can not clearly explain whether this is not counted angular on-demand loading.

In order to realize the effect of this learning note, we need to use:

Angular:https://github.com/angular/angular.js

Ui-router:https://github.com/angular-ui/ui-router

Oclazyload:https://github.com/ocombe/oclazyload

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:

<! DOCTYPE html> 

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. directive;
          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",routeFn]);
function routeFn($stateProvider,$urlRouterProvider){
  $urlRouterProvider.otherwise("/default");
  $stateProvider
  .state("default",{
    url:"/default",
    templateUrl:"views/default.html",
    controller:"defaultCtrl",
    controllerAs:"default",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("js/controllers/default.js");
      }]
    } 
  })
  .state("uibootstrap",{
    url:"/uibootstrap",
    templateUrl:"views/ui-bootstrap.html",
    resolve:{
      deps:["$ocLazyLoad",function($ocLazyLoad){
        return $ocLazyLoad.load("ui.bootstrap");
      }]
    } 
  })
  .state("ngtable",{
    url:"/ngtable",
    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",
    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 () {
"Use strict"
TempApp
.controller("ngTableCtrl",["$location","NgTableParams","$filter",ngTableCtrlFn]);
function ngTableCtrlFn($location,NgTableParams,$filter){
/ / 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 }];
This.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(){
/ / tree data
this.treeData = [
{
Id: "1",
Title: "label1",
ChildList:[
{
Id: "1-1",
Title: "sub level 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: "sub level 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
this.treeOptions = {
nodeChildren:"childList",
dirSelectable:false
}
}
} (); 

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

GitHub Url:https://github.com/program-monkey/angular-oclazyload-demo

The above is the ANGULARJS dynamic loading module and dependent data collation, follow-up continue to supplement the relevant information, thank you for your support for this site!