Угловая контроллер не является обязательной для просмотра

У меня есть Угловое контроллер определенно что-то вродеУгловая контроллер не является обязательной для просмотра

mainCtrl.js

angular.module("mainCtrl", []) 

.controller("mainController", function ($rootScope, $location, Auth) { 

    var vm = this; 
    vm.testStr = "If you see this, mainController is active on your page"; 
    . 
    . 
    .

Здесь Auth является угловым сервисом определен для аутентификации и не помещает testStr переменная за аутентификацией.

А вид определяется пытается связать переменную testStr как ниже

index.html

<html> 
<head> 
<base href="/"> 

<!-- load angular and angular-route via CDN --> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script> 

</head> 
<body ng-app="userApp" ng-controller="mainController as main"> 

<main class="container"> 
    <!-- ANGULAR VIEWS --> 
    <div><h3>{{main.testStr}}</h3></div> 
    <div ng-view></div> 
</main> 

</body> 
</html>

Но когда индекс загружается значение testString не отображается на странице. Вместо этого появляется {{main.testStr}}.

Я предполагаю, что это не обязательно использовать $scope и не может найти то, что я делаю неправильно.

Заранее благодарим за вашу помощь.

Редактировать

Есть другие файлы, связанные, которые я не упомянул здесь. Теперь я вижу их значимость.

Приложение модуль, app.js

angular.module("userApp", ["ngAnimate", "app.routes", 
    "authService", "mainCtrl", 
    "employeeCtrl", "employeeService"]) 

// application configuration to integrate token into requests 
.config(function ($httpProvider) { 

    // attach our auth interceptor to the http requests 
    $httpProvider.interceptors.push("AuthInterceptor"); 

});

модуль маршрутизации app.route.js

angular.module("app.routes", ["ngRoute"]) 

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

    $routeProvider 

    // route for the home page 
     .when("/", { 
      templateUrl: "app/views/pages/home.html" 
     }) 

     // login page 
     .when("/login", { 
      templateUrl: "app/views/pages/login.html", 
      controller: "mainController", 
      controllerAs: "login" 
     }) 

     // show all employees 
     .when("/employees", { 
      templateUrl: "app/views/pages/employees/all.html", 
      controller: "employeeController", 
      controllerAs: "employee" 
     }) 

     // form to create a new user 
     // same view as edit page 
     .when("/employees/create", { 
      templateUrl: "app/views/pages/employees/single.html", 
      controller: "employeeCreateController", 
      controllerAs: "employee" 
     }) 

     // page to edit a user 
     .when("/employees/:employee_id", { 
      templateUrl: "app/views/pages/employees/single.html", 
      controller: "employeeEditController", 
      controllerAs: "employee" 
     }); 

    $locationProvider.html5Mode(true); 

});

источник

2016-05-07 Sime

Вы объявили имя модуля mainCtrl

angular.module("mainCtrl", [])

но используя нг-приложение в качестве userApp

Изменение модуля, как это,

angular.module("userApp", [])

источник

2016-05-07 12:45:49 Sajeetharan

Я думаю, что я не предоставили достаточно подробно ранее. Что вы думаете после редактирования? – Sime

вам не следует вводить контроллеры в зависимость от модуля! – Sajeetharan

Вы имеете в виду модули, введенные в app.js? Можете ли вы предложить, как я могу избежать этого? Я собирался провести какое-то разделение между «компонентами» и в конечном итоге собрать их в приложение. – Sime

Ваше имя модуля является неправильным. Он должен быть userApp вместо mainCtrl. См рабочий пример ниже:

var myApp = angular.module("userApp", []); 
 

 
myApp.controller("mainController", function($scope) { 
 
    var vm = this; 
 
    vm.testStr = "Hello"; 
 
});

<html> 
 

 
<head> 
 
    <base href="/"> 
 

 
    <!-- load angular and angular-route via CDN --> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script> 
 

 
</head> 
 

 
<body ng-app="userApp" ng-controller="mainController as main"> 
 

 
    <main class="container"> 
 
    <!-- ANGULAR VIEWS --> 
 
    <div> 
 
     <h3>{{main.testStr}}</h3> 
 
    </div> 
 
    <div ng-view></div> 
 
    </main> 
 

 
</body> 
 

 
</html>

источник

2016-05-07 12:53:20

Я думаю, что раньше я не представил достаточно подробностей. Что вы думаете после редактирования? – Sime

Уверенный, Угловой загружается должным образом, потому что единственной проблемой, которую я вижу, может быть режим HTML5 –

, как я могу проверить это? – Sime

Угловая контроллер не является обязательной для просмотра

ответ

Смежные вопросы