angular.js - angular + es6 + webpack遇到的问题？
问题描述
1、代码如下：
//app.jsimport angular from 'angular';import uiRouter from 'angular-ui-router';import routing from './app.config';import HomeController from './controllers/home.controller';let app = angular.module(’app’, [uiRouter]);app.config(routing) .controller(’HomeController’, HomeController)
2、home.controller.js代码如下：
class HomeController{ constructor($scope){console.info(’为什么这里运行了两次？’); }}HomeController.$inject = [’$scope’];export default HomeController;
3、app.config.js代码如下：
routing.$inject = [’$stateProvider’, ’$urlRouterProvider’, ’$locationProvider’];export default function routing($stateProvider, $urlRouterProvider, $locationProvider){ $urlRouterProvider.otherwise(’/home’); $stateProvider.state(’home’, { url: ’/home’, templateUrl: require(’../views/home.html’), controller: ’HomeController’, title: ’社区综合受理平台’}).state(’record’, { url: ’/record’, templateUrl: ’views/record.html’, controller: ’RecordController’, title: ’社区服务综合受理记录’}).state(’guide’, { url: ’/guide’, templateUrl: ’views/guide.html’, title: ’社区受理服务事项’}).state(’proof’, { url: ’/proof’, templateUrl: ’views/proof.html’, controller: ’ProofController’, title: ’居住证明’}).state(’poor’, { url: ’/poor’, templateUrl: ’views/poor.html’, controller: ’PoorController’, title: ’就业困难人员待定’})};
4、html如下：
<!DOCTYPE html><html xmlns:ng='http://angularjs.org' lang='en' ng-app='app'><head> <meta charset='UTF-8'> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> <title ng-bind='title'></title></head><body ng-controller='MainController' ui-view></body></html>
5、home.html:
<p id='root'> <p class='head clearfix'><ul class='title clearfix'> <li><h3 ng-bind='title'></h3> </li></ul> </p> <p class='content'><p ng-controller='HomeController'> 这个是模板！！！</p> </p></p>
6、问题：为什么constrcutor()运行了2次？
问题解答
回答1：能看你的路由配置和html片段页面吗?一般情况是路由里配置了controller，在路由html片段里又声明了ng-controller。
------ 分割线 -----很明显吗！你既在路由里配置了HomeController，又在home.html声明了ng-controller='HomeController' 当然会执行两遍啦！
相关文章：
1. javascript - 微信小程序 wx.downloadFile下载文件大小有限制吗2. mysql - 仅仅只是把单引号与反斜杠转义不用prepare statement能否避免sql注入？3. javascript - 天猫首页首屏数据来源4. mysql在限制条件下筛选某列数据相同的值5. 新入手layuiadmin，部署到tp中。想用php自已写一个后台管理系统。6. android - 安卓做前端，PHP做后台服务器 有什么需要注意的？7. php - 生产环境下,给MySQL添加索引,修改表结构操作,如何才能让线上业务不受影响？8. mysql - 拖拽重排序后怎么插入数据库?9. macOS Sierra 10.12 安装mysql 5.7.1出现错误10. mysql 获取时间函数unix_timestamp 问题？
网公网安备