如何在javascript中調用控制器而不是HTML Angular JS

我正在做一個關於Thinkster.io的教程，其中涉及使用Angular JS編寫簡單的新聞應用程序。當我通過ng-controller = "MainCtrl"引用控制器（MainCtrl）時，我的代碼工作正常，但教程說我應該可以在我的配置函數中執行此操作。這是我的代碼。在此先感謝如何在javascript中調用控制器而不是HTML Angular JS

var app = angular.module('flapperNews', ['ui.router']); 
 

 
    app.factory('posts', [ 
 
    function() { 
 
     var o = { 
 
     posts: [] 
 
     }; 
 
     return o; 
 
    } 
 
    ]); 
 

 
    app.config([ 
 
    '$stateProvider', 
 
    '$urlRouterProvider', 
 
    function($stateProvider, $urlRouterProvider) { 
 

 
     $stateProvider 
 
     .state('home', { 
 
      url: '/home', 
 
      templateUrl: '/app/views/home.html', 
 
      controller: 'MainCtrl' 
 
     }); 
 

 
     $urlRouterProvider.otherwise('home'); 
 
    } 
 
    ]); 
 

 

 

 

 
    app.controller('MainCtrl', [ 
 
    '$scope', 
 
    'posts', 
 

 
    function($scope, posts) { 
 
     $scope.posts = posts.posts; 
 

 
     $scope.addPost = function() { 
 
     console.log("adding post"); 
 
     if (!$scope.title || $scope.title === "") { 
 
      return; 
 
     } 
 
     $scope.posts.push({ 
 
      title: $scope.title, 
 
      link: $scope.link, 
 
      upvotes: 0 
 
     }); 
 
     $scope.title = ""; 
 
     $scope.link = ""; 
 
     } 
 
     $scope.incrementVotes = function(post) { 
 
     post.upvotes += 1; 
 
     } 
 
     $scope.decrementVotes = function(post) { 
 
     post.upvotes -= 1; 
 
     } 
 
    } 
 
    ]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Flapper News</title> 
 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <link href="../../public/css/style.css" rel="stylesheet" /> 
 

 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> 
 
    <script type="text/javascript" src="../../app.js"></script> 
 
</head> 
 

 
<body ng-app="flapperNews"> 
 
    <div class="row"> 
 
    <div class="col-md-5 col-md-offset-3"> 
 
     <ui-view></ui-view> 
 

 
     <div id="container"> 
 
     <div id="posts" ng-repeat="post in posts | orderBy: '-upvotes'"> 
 

 
      <a ng-show="post.link" href="{{post.link}}"> 
 
\t \t \t \t \t \t \t {{post.title}} 
 
\t \t \t \t \t \t </a> 
 
      <span ng-hide="post.link"> 
 
\t \t \t \t \t \t \t {{post.title}} 
 
\t \t \t \t \t \t </span> 
 
      <span id="up" class="glyphicon glyphicon-thumbs-up" ng-click="incrementVotes(post)"></span> 
 
      {{post.upvotes}} 
 
      <span class="glyphicon glyphicon-thumbs-down" ng-click="decrementVotes(post)"></span> 
 

 
     </div> 
 
     </div> 
 
     <div id="form"> 
 
     <form id="form-items" ng-submit="addPost()"> 
 
      <input type="text" placeholder="Title" ng-model="title"></input> 
 
      </br> 
 
      <input type="text" placeholder="Link" ng-model="link"></input> 
 
      </br> 
 
      <button class="btn btn-lg btn-primary" type="submit">Post</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script type="text/ng-template" id="/app/views/home.html"> 
 
    <div class="page-header"> 
 
     <h1>People News</h1> 
 
    </div> 
 
    <!-- rest of template --> 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-01-02 Greevman

爲你做這項工作plunker？將此html轉換爲模板

<div id="container"> 
    <div id="posts" ng-repeat="post in posts | orderBy: '-upvotes'"> 

     <a ng-show="post.link" href="{{post.link}}"> 
         {{post.title}} 
        </a> 
     <span ng-hide="post.link"> 
         {{post.title}} 
        </span> 
     <span id="up" class="glyphicon glyphicon-thumbs-up" ng-click="incrementVotes(post)"></span> 
     {{post.upvotes}} 
     <span class="glyphicon glyphicon-thumbs-down" ng-click="decrementVotes(post)"></span> 

    </div> 
    </div> 
    <div id="form"> 
    <form id="form-items" ng-submit="addPost()"> 
     <input type="text" placeholder="Title" ng-model="title"></input> 
     </br> 
     <input type="text" placeholder="Link" ng-model="link"></input> 
     </br> 
     <button class="btn btn-lg btn-primary" type="submit">Post</button> 
    </form> 
    </div>

來源

2016-01-02 17:22:14

非常感謝。 – Greevman

如何在javascript中調用控制器而不是HTML Angular JS

回答

相關問題