angularjs 初学者的坑

2019独角兽企业重金招聘Python工程师标准>>>

有关controller的定义

从angularjs1.3开始，已经不允许定义全局的controller， 所以网上好多老的demo在运行的时候会报没有注册对应的controller。所以，1.3以后的angrularjs 必须如下定义：

  angular.module('pro01App2' , [])
    .controller('AboutCtrl', function () {

  });

有关ngroute

再用yoman生成的angrularjs项目，头部的导航条点击没有相应。

看浏览器的地址，多了一个感叹号，但是在index.html 里面是如下的显示：

        <ul class="nav navbar-nav">
          <li class="active"><a href="#/">Home</a></li>
          <li><a ng-href="#/about">About</a></li>
          <li><a ng-href="#/">Contact</a></li>
        </ul>

有如下的处理方法：

• 将上面的链接里面添加一个感叹号。 --- 这个方法太挫了

        <ul class="nav navbar-nav">
          <li class="active"><a href="#!/">Home</a></li>
          <li><a ng-href="#!/about">About</a></li>
          <li><a ng-href="#!/">Contact</a></li>
        </ul>

• 由于 ng-route 从1.6以后，$locationProvider 添加了“！” 感叹号的前缀。具体的链接如下： https://docs.angularjs.org/api/ng/provider/$locationProvider

修改办法： 在 app.js里面，添加如下的代码：

  $locationProvider.hashPrefix('');

    完整的实例：

app.config(function ($routeProvider , $locationProvider) {

  $locationProvider.hashPrefix('');

  $routeProvider
    .when('/', {
      templateUrl: 'views/main.html',
      controller: 'MainCtrlTest',
      controllerAs: 'main'
    })
    .when('/about', {
      templateUrl: 'views/about.html',
      controller: 'AboutCtrlTest',
      controllerAs: 'about'
    })
    .otherwise({
      redirectTo: '/about'
    });
});

转载于:https://my.oschina.net/u/725800/blog/839819