AngularJS on Time Friend

A WeChat SPA Page Webview Cache Issue

Wed, 22 Feb 2017 16:14:25 +0000

A Low-Level Problem

Because the company’s WeChat project uses Angular routing for single-page applications. So page switching is done based on hash values.

We encountered a problem: every time we deploy new web code to the server. On Android WeChat client, it always takes many days. Even requires uninstalling WeChat. After reopening the page, the page will update. (But there’s no such problem on iPhone)

If a critical bug is encountered after the version is officially released. That would be a disaster.

AngularJS Lazy Loading (3)

Wed, 01 Jun 2016 23:55:35 +0000

The previous article roughly described Angular’s startup process,

If you want to asynchronously load third-party modules in your own project, you need to run through the main logic from the previous article again.

This way, all methods of third-party modules can be loaded into Angular.

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 '$injector',
 function($controllerProvider, $compileProvider, $filterProvider, $provide, $injector) {

 //As mentioned in the first article, expose internal methods
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;


 //And define a global function for easy future calls
 //Code for loading third-party modules,
 window.addModule=function(moduleName){
 var module = angular.module(moduleName);
 var ngProviders = {
 '$controllerProvider': $controllerProvider,
 '$compileProvider': $compileProvider,
 '$filterProvider': $filterProvider,
 '$provide': $provide
 };

 if (module.requires) {
 for (var i = 0; i < module.requires.length; i++) {
 addModule(module.requires[i]);
 }
 }
 angular.forEach(module._invokeQueue, function(args) {
 var provider = ngProviders[args[0]] || $injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._configBlocks, function(args) {
 var provider = ngProviders.$injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._runBlocks, function(args) {
 $injector.invoke(args);
 });
 }

 }
]);

AngularJS Lazy Loading (2)

Tue, 31 May 2016 20:34:35 +0000

In the previous article, we implemented the simplest AngularJS lazy loading,

by replacing Angular’s internal methods and using require.js with $q to complete lazy loading.

Today let’s talk about how Angular lazy loads third-party modules;

Before that, we need to understand how Angular starts.

setupModuleLoader Method

In the above figure, we need to pay attention to a very important method;

setupModuleLoader method, as the name suggests - module loader;

AngularJS Lazy Loading (1)

Mon, 30 May 2016 16:14:25 +0000

Today let’s talk about a problem that has been bothering me for a long time. AngularJS lazy loading.

The benefits of Angular don’t need to be mentioned here, but after using it for a while, you’ll find that all Controllers, Services, Directives, etc. of a website are loaded completely, before the page starts running.

For small projects with little code, this doesn’t feel like a big problem.

But when there are more pages, the main page becomes increasingly bloated. Useful and useless code are all loaded. Although loading everything means the first page load will be much slower, subsequent pages will be extremely fast. But this is not Smart at all.

Source Code Analysis - Small Differences Between Providers in AngularJS

Mon, 22 Feb 2016 16:14:25 +0000

AngularJS Providers

Angular has the following methods to create providers:

provider()
service()
factory()

Provider Usage

angular.module("app", [])
.provider("HelloAngular", function() {
 return {
 $get: function() {
 var name = "Xiaoming";
 function getName() {
 return name;
 }
 return {
 getName: getName
 }
 }
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Service Usage

angular.module("app", [])
.service("HelloAngular", function() {
 this.name = "Xiaoming";
 this.getName=function(){
 return this.name;
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Factory Usage

angular.module("app", [])
.factory("HelloAngular", function() {
 var name = "Xiaoming";
 function getName(){
 return name;
 }
 return {
 	getName:getName
 };
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

The implementation methods differ, but the usage is exactly the same

Annoying AngularJS Annotations - Using grunt-ng-annotate

Fri, 12 Jun 2015 23:15:00 +0000

Angular added dependency injection

When writing code, roughly written as follows

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

But such code, after compression will cause a problem. Function parameters: $scope, $http, $state, $timeout will become: a,b,c,d

Causing this function cannot find services to inject, because each parameter’s naming is strictly required.

As follows:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

To solve this problem, angular supports the following writing:

AngularJS Directive Template

Thu, 21 May 2015 22:17:36 +0000

myModule.directive('namespaceDirectiveName', function factory(injectables) {

 var directiveDefinitionObject = {
 restrict: string,// Directive usage method, including tag, attribute, class, comment
 priority: number,// Directive execution priority
 template: string,// Template used by directive, expressed as HTML string
 templateUrl: string,// Load template from specified url address
 replace: bool,// Whether to replace current element with template, if false, append to current element
 transclude: bool,// Whether to transfer current element's content to template
 scope: bool or object,// Specify directive's scope
 controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},// Define interface function for interacting with other directives
 require: string,// Specify other directives that need to be depended on
 link: function postLink(scope, iElement, iAttrs) {...},// Programmatically manipulate DOM, including adding listeners, etc.
 compile: function compile(tElement, tAttrs, transclude){
 return: {

 pre: function preLink(scope, iElement, iAttrs, controller){...},
 post: function postLink(scope, iElement, iAttrs, controller){...}
 }

 }// Programmatically modify DOM template copy, can return link function
 };

 return directiveDefinitionObject;

});