ycq.key

Size: px

Start display at page:

Download "ycq.key"

迁赞伏
4 years ago
Views:

2 sponia.com

5 Why Angular?

6 数据中间页

14 Tip 1: 使用 controlleras <div ng-controller="appctrl as vm"> {{ vm.title </div> angular.module('app', []).controller("appctrl", AppCtrl); function AppCtrl() { this.title = "Hello World"; <div ng-controller="parentctrl"> {{ title <div ng-controller="childctrl"> {{ title </div> </div> 难以追踪数据来源

15 Tip 2: 精简你的 Controller Why?

16 Services model Controller model/method View

17 angular.module('app', []).controller("todoctrl", TodoCtrl); function TodoCtrl() { var vm = this; vm.todos = []; vm.addtodo = addtodo; vm.removefromtodos = removefromtodos; function addtodo(item) { // Business logic inside controller vm.todos.push(item); function removefromtodos(item) { // Business logic inside controller if (vm.todos.indexof(item) > -1) { vm.todos.splice(vm.todos.indexof(item), 1);

18 angular.module('app', []).factory('todo', Todo); */ function Todo() { var service = { todos: [], addtodo: addtodo, removefromtodos: removefromtodos ; return service; function addtodo(item) { this.todos.push(item); function removefromtodos(item) { if (this.todos.indexof(item) > -1) { this.todos.splice(this.todos.indexof(item), 1);

19 angular.module('app', []).controller("todoctrl", TodoCtrl); */ function TodoCtrl(Todo) { var vm = this; vm.todos = Todo.todos; vm.addtodo = addtodo; vm.removefromtodos = removefromtodos; function addtodo(item) { Todo.addTodo(item); function removefromtodos(item) { Todo.removeFromTodos(item);

20 Tip 3: 路由使用 Resolve 激活 Controller 前加载完所需数据仅仅数据不同

21 */ function config($stateprovider) { var grouphot = { url: '/hot', name: 'group.hot', templateurl: 'app/group/partials/group-list.html', resolve: { */ grouplist: function(group) { return Group.getRecommendList();, controller: 'GroupListCtrl as vm' ; var groupsoccer = { url: '/soccer', name: 'group.soccer', templateurl: 'app/group/partials/group-list.html', resolve: { */ grouplist: function(group) { return Group.getSoccerList();, controller: 'GroupListCtrl as vm' ; $stateprovider.state(grouphot); $stateprovider.state(groupsoccer);

22 angular.module('app.group').controller('grouplistctrl', GroupListCtrl); */ function GroupListCtrl(groupList, Loadmore) { /*jshint validthis: true */ var vm = this; vm.grouplist = grouplist; vm.loadmore = loadmore; function loadmore() { Loadmore.call(vm.groupList);

23 Tip 4: 尽量使用单向数据绑定 For Performance AngularJS 1.3+ use one time binding <p>my name is {{::name</p> AngularJS < 1.3 use bindonce.js <p>my name is <span bo-text="name"></span></p>

25 app/ controllers/ services/ partials/ app/ group/ post/ home/

26 src/ - app/ - app.js - controllers/ - sidebar.js - dashboard.js - services/ - util.js - post.js - directive/ - partials/ - sidebar.html - dashboard.html - - assets/ - styles/ - main.scss - base/ - components/ - helper/ - pages/ - images/ - font/ - index.html bower_components/ node_modules/ gulpfile.js

27 src/ - app/ - app.module.js - group/ - group.module.js group.route.js group-home.controller.js oogroupcard.js - partials/ - group-home.html - group-card.html - post/ - post.module.js - post.route.js - - commom/ - filter/ - factories/ - assets/ - styles/ - images/ - font/ - index.html bower_components/ node_modules/ gulpfile.js

28 src/ - app/ - app.module.js - group/ - group.module.js group.route.js group-home.controller.js oogroupcard.js - partials/ - group-home.html - group-card.html - post/ - post.module.js - post.route.js - - commom/ - filter/ - factories/ - assets/ - styles/ - images/ - font/ - index.html bower_components/ node_modules/ gulpfile.js // app.module.js (function() { 'use strict'; angular.module('app', [ 'app.group', 'app.post' ]); )(); // group.modlue.js (function() { 'use strict'; )(); angular.module('app.group', []);

29 src/ - app/ - app.module.js - {{module_name/ - {{module_name.module.js {{module_name.route.js {{module_name-{{sub_name.controller.js oo{{directive_name.js - partials/ -{{module_name-{{sub_name.html -{{directive_name.html - group/ - group.module.js - group.route.js group-home.controller.js oogroupcard.js - partials/ - group-home.html - group-card.html - - commom/ - filter/ - factories/ - assets/

31 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello Angular</title> </head> <body> <script src="app/app.module.js"></script> <script src="app/post/post.module.js"></script> <script src="app/group/group.module.js"></script> <script src="app/home/home.module.js"></script> <script src= app/core/core.module.js ></script> <script src="app/core/config.js"></script> <script src="app/core/constants.js"></script> <script src= app/core/run.js ></script> <script src="app/app.controller.js"></script> <script src="app/group/group-detail.controller.js"></script> <script src="app/group/group-explore.controller.js"></script> <script src="app/group/oogroupcard.js"></script> <script src="app/post/post.controller.js"></script>... </body> </html>

32 // gulpfile.js var gulp = require('gulp'); var config = require('./config')(); var $ = require('gulp-load-plugins')(); gulp.task('inject', function() { log('inject the app js into the html'); return gulp.src(config.index).pipe($.inject(gulp.src(config.js), { read: false, starttag: '', addrootslash: false, relative: true )).pipe(gulp.dest(config.client)); ); // index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello Angular</title> </head> <body>   </body> </html> 但有时你可能会遇到这种情况创建 gulp inject 任务自动 inject 相关 JS 文件, 避免手写文件路径

33 // index.html <body>  <script src="app/app.module.js"></script> <script src="app/post/post.module.js"></script> <script src="app/group/group.controller.js"></script> <script src="app/group/group.module.js"></script>  </body> 此时并没有注册 app.group 模块

34 // gulpfile.js var gulp = require('gulp'); var config = require('./config')(); var $ = require('gulp-load-plugins')(); // config.js module.exports = function() { var client = 'src/'; var clientapp = client + 'app/'; var clientcommon = client + 'common/'; gulp.task('inject', function() { log('inject the app js into the html'); return gulp.src(config.index).pipe($.inject(gulp.src(config.js), { read: false, starttag: '', addrootslash: false, relative: true )).pipe(gulp.dest(config.client)); ); ; var config = { index: client + 'index.html', js: [ clientapp + '**/*.module.js', clientcommon + '**/*.module.js', clientapp + '**/*.js', clientcommon + '**/*.js', '!' + clientapp + '**/*.spec.js' ] ; return config; 优先 inject 模块文件更好的解决方案?

35 src/ - app/ - app.module.js - group/ - group.module.js group.route.js group-home.controller.js oogroupcard.js - partials/ - group-home.html - group-card.html - assets/ - styles/ - main.scss - base/ - components/ - _card.scss - helper/ - pages/ - _group.scss - images/ - font/ - index.html bower_components/ node_modules/ gulpfile.js 更好的解决方案?

36 Component Directive

37 // home.js // home.html <navbar></navbar> <main> <div> <oo-publish></oo-publish> <oo-timeline></oo-timeline> </div> <sidebar></sidebar> </main> import angular from 'angular'; import 'angular-ui-router'; import homecomponent from './home.component'; let homemodule = angular.module('home', [ 'ui.router' ]).config(($stateprovider)=>{ $stateprovider.state('home', { url: '/', template: '<home></home>' ); ).directive('home', homecomponent); export default homemodule;

38 What About ES6

39 转换工具 : Bebel Traceur 模块加载 : SystemJS ES6 module loader 模块管理 : JSPM

40 jspm.io

42 src/ - app/ - common/ - navbar/ - sidebar/ - components/ - home/ - home.js - home.component.js - home.controller.js - home.spec.js - home.html - _home.scss - app.component.js - app.js - app.html - _app.scss - index.html - jspm_packages - github/ - npm/ - system.js node_modules/ - jspm.config.js - gulpfile.js - package.json - karma.conf.js // index.html <body> <app></app>  <script src="jspm_packages/system.js"></script> <script src="jspm.config.js"></script> <script> System.import('app/app'); </script>  </body> // jspm.config.js no more js file in index.html System.config({ "baseurl": "./", "transpiler": "babel", "paths": { "*": "*.js", "github:*": "jspm_packages/github/*.js", "npm:*": "jspm_packages/npm/*.js", "map": { "angular": "github:angular/bower-angular@1.4.1", "angular-ui-router": "github:angular-ui/uirouter@0.2.15", "babel": "npm:babel-core@5.5.5", );

43 src/ - app/ - common/ - navbar/ - common.js - components/ - home/ - home.js - home.component.js - home.controller.js - home.spec.js - home.html - _home.scss - components.js - app.component.js - app.js - app.html - _app.scss - index.html - jspm_packages - github/ - npm/ - system.js node_modules/ - jspm.config.js - gulpfile.js - package.json // app.js import angular from 'angular'; import 'angular-ui-router'; import Common from './common/common'; import Components from './components/components'; import AppComponent from './app.component'; let appmodule = angular.module('app', [ 'ui.router', Common.name, Components.name ]).directive('app', AppComponent); angular.element(document).ready(()=> { angular.bootstrap(document, [appmodule.name]), { strictdi: true ); export default appmodule;

44 Advantage of use ES6 and JSPM

45 Module System Import & Export pieces of code // home.js import angular from 'angular'; import 'angular-ui-router'; import homecomponent from './home.component'; let homemodule = angular.module('home', [ 'ui.router' ]).config(($stateprovider, $urlrouterprovider) => { $stateprovider.state('home', { url: '/', template: '<home></home>' ); ).directive('home', homecomponent); export default homemodule;

46 Classes Sugar Over Prototypical Inheritance // parent.js class Parent { constructor(name) { this.name = name; getname() { return this.name; export default Parent; // child.js import Parent from './parent'; class Child extends Parent { constructor(name, age) { super(name); this.age = age; getage() { return this.age; export default Child;

47 Classes Working On Controller 注意依赖注入问题 // home.controller.js class HomeController { constructor($http, otherservice) { this.$http = $http; getdata() { this.$http.get(); // works otherservice.dosomething(); // throws error HomeController.$inject = ['$http', 'otherservice']; export default HomeController;

48 Arrow Function less keystrokes, keep context. // user.controller.js class UserController { constructor(user) { this.user = User; this.name = 'zeejune' getdata() { this.user.get().then(respond => { // this in here === this out there this.name = respond.name; ); UserController.$inject = ['User']; export default UserController;

49 Template Strings Multiline, Interpolatable Strings // home.component.js import controller from './home.controller'; import template from './home.html!text'; // JSPM will handel this let homecomponent = function(){ return { restrict: 'E', template, // no more templateurl and $templatecache scope: {, bindtocontroller: true, controller, controlleras: 'vm' ; ; export default homecomponent;

51 Last But most Important

52 Thank You!

05 01 accordion UI containers 03 Accordion accordion UI accordion 54

jquery UI plugin Accordion 05 01 accordion UI containers 03 Accordion accordion UI accordion 54 05 jquery UI plugin 3-1