美文网首页WEB前端程序开发Hybrid开发Web前端之路
【Hybrid开发高级系列】AngularJS(三)——开发实践

【Hybrid开发高级系列】AngularJS(三)——开发实践

作者: Kevin_Junbaozi | 来源:发表于2018-05-10 22:22 被阅读37次

    1 开发实践

    AngularJS体验式编程系列文章

    http://blog.fens.me/series-angular/

    AngularJS实战

    http://www.imooc.com/learn/156

    1.1 工程搭建

    AngularJS从构建项目开始

    http://blog.fens.me/angularjs-yeoman-project/

    1.1.1 使用Yeoman自动生成工程

    Yeoman官方教程:用Yeoman和AngularJS做Web应用

    http://blog.jobbole.com/65399/

    1.1.1.1 Yeoman安装

            在安装Yeoman之前,你需要确认以下配置:

    Node.js版本在0.10以上

    npm版本在1.3.7以上

            安装好Node之后,你就可以用命令行来安装Yeoman了。 注意:大部分情况下Yeoman是要通过命令行来操作的,不同的系统执行以下命令的地方不太一样:Mac下请使用终端,Linux下使用shell,Windows下使用Cygwin

    $ npm install--global yo

            如果你看到了’permission errors’或者’access errors’,你需要在这条命令前面加上’sudo’。通过

    $ yo  --version && bower --version && grunt --version

            命令来检查是不是所有东西都已经安装好了。在执行完上述命令后,你应该会看到有四个版本号会被打印出来:

        • Yeoman

        • Bower

        • Grunt

        • GruntCLI(Grunt的命令行界面)

            适用本教程的Yeoman, Bower和Grunt版本

        安装Yeoman生成器

            在传统的Web开发流程中,你可能会花很多时间在配置代码模板、下载依赖还有手动组件项目文件结构上。而Yeoman就是来简化这个流程的!前面说的那些繁重的工作都会被交给Yeoman来完成。让我们来试试用Yeoman来创建一个AngularJS项目吧! 用下面这行命令进入Yeoman的菜单:

    $ yo

            用键盘的上下键来操作菜单,当选项’install agenerator’被高亮的时候按下回车键。 接下来我们需要寻找一个合适的生成器。搜索’angular’的话,你会得到很多搜索结果。这些生成器都是由许多Yeoman开源社区贡献的。在这个例子里,我们使用的是’generator-angular’。当选中了’generator-angular’后,按下回车执行安装,它所依赖的Node包就会开始被下载了。

            如果你知道要安装的生成器的名字,你可以直接用npm来安装:

    $ npm install -g generator-angular

            下面是一张预览图:

            这个例子使用的generator-angular版本,或者你可以直接安装0.7.1这个版本:

    $ npm install-g generator-angular@0.7.1

    1.1.1.2 使用生成器搭建你的应用

            你可以在Yeoman的菜单中操作已经安装好的生成器:

    $ yo

            等一下!不要直接就运行生成器了。重新创建一个新的项目目录,生成器会在这个目录下生成出你的项目文件的。

    $ mkdir mytodo

    $ cd mytodo

            执行’yo’,选中’Run the Angular generator’,运行生成器。当你比较熟悉Yo的时候,就可以不通过菜单直接运行生成器:

    $ yo angular

            一些生成器也会提供一些有共同开发库(common developerlibraries)的可选配置来定制你的应用,能够加速初始化你的开发环境。 generator-angular会询问你需不需要使用Sass和/或者Bootstrap,使用’n'和’y'进行选择。

            然后你需要选择你需要使用的Angular模块。Angular模块是一些带有特定功能的独立的JS文件。举个例子,ngResource模块(angular-resource.js)提供了RESTful服务。你可以使用空格键来取消项目。下面来看一看默认值。(当你在试用空格的效果时,确保所有的模块都被标记为绿色)

            好的,现在按下回车键。Yeoman将会自动构建你的应用、拉取需要的依赖并在你的工作流中创建一些有帮助的Grunt任务(GruntTasks)。几分钟后,我们就能正式开始啦!

    1.1.1.3 由Yeoman构建的文件目录结构

            打开’mytodo’目录,你会看到下面的文件结构:

    app/:Web应用的父级目录。

        index.html:Angular应用的基准HTML文件(base htmlfile)

        404.html、favicon.ico和robots.txt:通用的Web文件,Yeoman已经将它创建出来了,你不需要再手动去创建

        bower_components:存放项目相关的JavaScript或Web依赖,由bower安装的

        scripts:我们的JS文件

            app.js:主程序

            controllers:Angular控制器

        styles:我们的CSS文件

        views:Angular模板

    Gruntfile.js、package.json 以及node_modules:Grunt需要使用的依赖以及配置。

    test和karma.conf.js/karma-e2e.conf.js:测试框架以及针对这个项目的单元测试,包括了为控制器写的样板测试(boilerplatetests)。

    1.2 架构设计技巧

    1.2.2 请求Service层

    1.2.3 数据模型层

    1.2.4 业务逻辑层

    1.2.5 界面表现层

    1.3 代码开发技巧

    1.3.1 跨html跳转到某一个业务模块

    $window.location.href = 'registerIndex.html#/userInfoInput';

    var registerModule = angular.module("registerModule", ['ui.router', 'hj-User', 'hj-Message', 'ngAnimate', 'hj-Loadding']).config(function($stateProvider,$urlRouterProvider){

                            $urlRouterProvider.otherwise("mobileInput");   

                            $stateProvider.state('mobileInput',{

                                                                            url: '/mobileInput',

                                                                            templateUrl: 'registerStep1.html',

                                                                            controller: 'sendMsgCtr'

                                                                }).state('vrfMsg',{

                                                                            url: '/vrfMsg',

                                                                            templateUrl: 'registerStep2.html',

                                                                            controller: 'vrfMsgCtr'

                                                                }).state('userInfoInput', {

                                                                            url: '/userInfoInput',

                                                                            templateUrl: 'registerStep3.html',

                                                                            controller: 'userInfoInputCtr'

                                                                }).state('passwordInput',{

                                                                            url: '/passwordInput',

                                                                            templateUrl: 'registerStep4.html',

                                                                            controller: 'passwordInputCtr'

                                                                });

    });

    原理解析:

            其实AngularJS的页面内的内容切换,也是基于html的锚点机制来实现的,不同锚点对应显示不同html部分的内容。

    1.3.2 页面回退

            下面方法不好用,不如直接用history对象操作简单:

    window.history.back();

    window.history.go(-1);

    在angularJS中实现返回前一页

    http://blog.csdn.net/qianqianyixiao1/article/details/51146519

    AngularJs返回前一页面时刷新一次前面页面

    http://blog.csdn.net/ywl570717586/article/details/50505536

    html

    <script src="lib/angular/angular-1.4.9/angular.js"></script>

    <script src="lib/angular/angular-ui-router.min.js"></script>

    app

       angular.module('ConsoleUIApp', ['ui.router','ui.bootstrap'])

           .config(function ($stateProvider, $urlRouterProvider, $httpProvider) {

                // For any unmatched url, redirect to /state1

               $urlRouterProvider.otherwise("/home");

               $stateProvider

                   .state('home', {

                       url: "/home",

                       templateUrl: "views/home.html",

                        controller: 'HomeCtrl'

                    })

                   .state('testing', {

                       url: "/testing",

                       templateUrl: "views/testing.html",

                       controller: 'TestingCtrl'

                    })

            })

           .run(function($rootScope, growl, $state, $stateParams) {

               $rootScope.$state = $state;

               $rootScope.$stateParams = $stateParams;

               $rootScope.$on("$stateChangeSuccess",  function(event, toState, toParams, fromState, fromParams) {

                    //to be used for back button won't work when page is reloaded.

                   $rootScope.previousState_name = fromState.name;

                   $rootScope.previousState_params = fromParams;

                });

                //back button function called from back button's ng-click="back()"

                $rootScope.back = function() {//实现返回的函数

                $state.go($rootScope.previousState_name,$rootScope.previousState_params);

              };

            });

    controller:

         $scope.sub =function(addRode) {

         $rootScope.back()//直接使用

         }

    https://github.com/angular-ui/ui-router/issues/92

    1.3.3 路由变化监控

    AngularJS中locationchange、routechange事件

    http://blog.csdn.net/spy19881201/article/details/17096675

    [javascript]AngularJS-需要$routeChangeStart和$locationChangeStart的一些组合

    http://www.itstrike.cn/Question/f341de90-c2ae-4d71-b0e6-c547c92fb4bf.html

    1.3.4 路由拦截与重定向

            路由拦截的原理在于监听$stateChangeStart或者$locationChangeStart事件,在此事件中对即将跳转的路由状态进行拦截解析并做重定向处理。

    //    function(event, toState, toParams, fromState, fromParams)

        $rootScope.$on('$stateChangeStart', function(event){

            var toState = arguments[1];

            var toParams = arguments[2];

            var fromState = arguments[3];

            var fromParams = arguments[4];

            if(toState.name =="myIndexNoOn"){

                if(hj.UserUtil.checkLoginStatus())

                {

                    $state.go("infoIndexOn");

                }

            }

            else{

                //This will load the current route first (ie: '/home'), and then

                //redirect the user to the correct 'login' route.

            }

        });

    1.3.5 页面Loading生命周期事件

        View Load Events视图加载事件

        $viewContentLoading- 当视图开始加载,DOM渲染完成之前触发,该事件将在$scope链上广播此事件。

    $scope.$on('$viewContentLoading',function(event, viewConfig){

        // Access to all the view config properties.

        // and one special property 'targetView'

        // viewConfig.targetView 

    });

        • $viewContentLoaded-当视图加载完成,DOM渲染完成之后触发,视图所在的$scope发出该事件。

    $scope.$on('$viewContentLoaded',function(event){ ... });

    $scope.$watch('$viewContentLoaded',function(event){ ... });

    1.3.6 依赖注入的顺序与方法参数的引用属性必须保持一致

            如上图就是错误写法,这样会导致构造方法入参类型是错的!!!

        原因分析:

            AngularJS中注入依赖,本质上也是根据类名去寻找对应类的代码逻辑地址,如果有多个对象注入,在初始化方法中,必须是按照注入顺序传递进来,因为JS是无类型的,切记切记。

    1.3.7 Service的Factory声明方式使用

    AngularJS中service,factory,provider的区别

    http://my.oschina.net/tanweijie/blog/295067

    简介AngularJS中使用factory和service的方法

    http://www.xker.com/page/e2015/06/199141.html

    使用Factory创建复制数据对象单例:

    assetIndex.factory("assetData", function($rootScope, hjFundService) {

       var assetObj = {

            totalAsset : '----',

            yestodayProfit : '----',

            totalProfit : '----',

            zqAsset : '----',

            fundAsset : '----',

            highAsset : '----',

            mpData : {},

            mpSize : 0,

            mpIndexUrl : '../account/mpIndex.html'

        };

        assetObj.reloadAssetData = function(callback, callbackError){

            //数值在页面失去焦点后被释放了,在此重新获取一次,保险一点

            var hjUserId = hj.UserUtil.getCmfUserId();

            if(!hjUserId) return;

            var promise = hjFundService.queryTotalAsset({

                userId: hjUserId

            });

            promise.then(function(data) {

                assetObj.totalAsset = data.totalAsset;

            }, function(e) {

                assetObj.totalAsset = '----';

            });

            ……

            promise = hjFundService.queryMyMpList({

                userId: hjUserId

            });

            promise.then(function(data) {

                assetObj.mpData = data;

                assetObj.mpSize =data.mpList.length;

                assetObj.mpIndexUrl ='../account/mpIndex.html';

                if(callback)

                {

                    callback();

                }

            }, function(e) {

                assetObj.mpSize = 0;

                if(callbackError)

                {

                    callbackError();

                }

            });

        };

        return assetObj;

    });

    1.3.8 图片轮播代码

    1.3.9 控件查询

    var scrollObj = document.querySelector('.fundVoteLists');

    1.3.10 登录退转后,回退到页面,页面事件响应失效问题

        问题:

            从购买页面做重定向到登录页,再从登录页登录成功回到购买页面,购买页面的事件响应失效。

        原因分析:

            在controller加载时,碰到登录失效时,虽然要跳转到登录页,但是当前runloop周期内,还是应该继续执行剩余代码,因为事件绑定逻辑都要执行完,不然页面回退回来,就会发现事件无法响应。

    2 参考链接

    2.1 AngularJS基础

    整理AngularJS中的一些常用指令

    http://www.xker.com/page/e2015/06/198575.html

    AngularJS移动开发中的坑汇总

    http://blog.csdn.net/offbye/article/details/38490821?utm_source=tuicool&utm_medium=referral

    25个超有用的AngularJS Web开发工具

    http://www.chinaz.com/web/2015/0703/419434.shtml

    AngularJS最理想开发工具WebStorm

    http://blog.fens.me/angularjs-webstorm-ide/

    angular通过$http与服务器通信

    http://blog.csdn.net/yangnianbing110/article/details/43124679

    AngularJS-常用服务

    http://www.2cto.com/kf/201504/388774.html

    第九讲 Angularjs常用服务$http $location $cacheFactory $log $res服务

    http://www.phonegap100.com/article-416-1.html

    简介AngularJS中$http服务的用法

    http://www.jb51.net/article/79243.htm

    AngularJS中使用路由和$location切换视图

    http://www.thinksaas.cn/group/topic/348590/

    angularjs通过锚链接实现页面切换的问题

    https://segmentfault.com/q/1010000002949626

    走进AngularJs(二)ng模板中常用指令的使用方式-吕大豹

    http://www.tuicool.com/articles/jIV7rm

    React vs Angular 2:战争继续

    http://ouvens.github.io/article-translation/2016/04/07/react-vs-angular2-fight-rages-on.html?utm_source=tuicool&utm_medium=referral

    急急急!高手请帮忙!angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新

    http://www.oschina.net/question/2356458_233962

    ng-include用法分析以及多标签页面的简单实现方式

    http://my.oschina.net/keysITer/blog/630621?p=1

    深入理解ng里的scope

    http://get.ftqq.com/462.get

    angularJs前端的页面分解与组装

    http://hudeyong926.iteye.com/blog/2111664

    2.2 Angular route

    AngularJS -路由入门

    http://www.linuxidc.com/Linux/2015-02/113532.htm

    [javascript] AngularJS-需要$routeChangeStart和$locationChangeStart的一些组合

    http://www.itstrike.cn/Question/f341de90-c2ae-4d71-b0e6-c547c92fb4bf.html

    AngularJs ng-route路由详解

    http://www.w2bc.com/article/95434

    AngularJS ui-router (嵌套路由)

    http://www.open-open.com/lib/view/open1416878937309.html

    AngularJS使用UI Router实现表单向导

    http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router

    Angular监听路由变化事件

    http://my.oschina.net/jack088/blog/479466

    http://stackoverflow.com/questions/23585065/angularjs-ui-router-change-url-without-reloading-state

    http://stackoverflow.com/questions/21309366/angularjs-ui-router-state-go-only-changing-url-in-address-bar-but-not-loa

    AngularJS中locationchange、routechange事件

    http://blog.csdn.net/spy19881201/article/details/17096675

    2.3 Data binding

    AngularJs双向绑定机制解析

    http://www.2cto.com/kf/201408/327594.html

    双向数据绑定---AngularJS的基本原理学习

    http://www.tuicool.com/articles/vENni2Y

    解析angularjs中的三种数据绑定策略

    http://www.2cto.com/kf/201504/391807.html

    七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX

    http://blog.jobbole.com/48780/

    双向数据绑定---AngularJS的基本原理学习

    http://www.tuicool.com/articles/vENni2Y

    AngularJS中数据双向绑定(two-way data-binding)

    http://www.cnblogs.com/Leo_wl/p/3715030.html

    相关文章

      网友评论

        本文标题:【Hybrid开发高级系列】AngularJS(三)——开发实践

        本文链接:https://www.haomeiwen.com/subject/gmntdftx.html