Angularjs не дает данные от контроллера

Я новичок в AngularJS.Angularjs не дает данные от контроллера

Я следую MEAN Stack Intro: Build an end-to-end application

У меня есть простой HTML-файл, чтобы проверить angularjs.

index.html

<html> 

    <head> 
     <meta charset="utf-8"> 
     <title>Stack POC</title> 
     <script type="application/javascript" src="app/scripts/controllers/user_controller.js"></script> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    </head> 
    <body ng-app="userListApp"> 
     <div ng-controller="userListController"> 
      <h1>No of users {{userCounts}}</h1> 
     </div> 
    </body> 
</html>

приложение/скрипты/контроллеры/user_controller.js

angular.module('userListApp', []).controller('userListController', function($scope){ 
       $scope.userCounts = 10; 
       });

Но когда я пытаюсь запустить это, его не дает.

Нет пользователей {{}} userCounts

Вместо 10 в счете.

Я использую gulp и gulp-connect для запуска сервера dev.

gulpfile.js

var gulp = require('gulp'), 
    connect = require('gulp-connect'); 

gulp.task('serve', function() { 
    connect.server({ 
     root: '.', 
     port: 8888 
    }); 
}); 

gulp.task('default', ['serve']);

package.json

{ 
    "name": "poc", 
    "version": "1.0.0", 
    "description": "", 
    "main": "gulpfile.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "gulp": "^3.9.1", 
    "gulp-connect": "^3.2.2" 
    } 
}

Использование firefox 45.0.2 для просмотра этой страницы.

источник

2016-04-20 Nilesh

Не могли бы вы предоставить jsFiddle логикой вашего контроллера? –

обновленный вопрос с файлом пакета – Nilesh

Это потому, что вы просто предоставление одной функции и не обеспечивают полного управления.

попробовать что-то вроде этого:

<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Stack POC</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 
     <script> 
     angular.module('userListApp', []).controller('userListController', function($scope){ 
      $scope.userCounts = 10; 
     }); 
     </script> 
    </head> 
    <body ng-app="userListApp"> 
     <div ng-controller="userListController"> 
      <h1>No of users {{ userCounts }}</h1> 
     </div> 
    </body> 
</html>

Вам нужен модуль (я назвал его userListApp в вашем примере), который создается с помощью функции angular.module(). Второй параметр - это зависимости (пустой массив означает «нет»). На этом модуле вы можете создать контроллер. Вы должны передать $scope в качестве аргумента функции контроллера, чтобы использовать ее в вашем примере. В контроллере вы можете назначить указанную переменную, как вы ее пробовали в предыдущей функции.

источник

2016-04-20 17:43:15 Darkmiller

Если я перемещаю скрипт в файл js и включаю его в раздел 'head', то он перестает работать :(. У вас есть идея, почему так? – Nilesh

Он все равно должен работать.Единственное важное значение - добавить новую ссылку на скрипт ниже углового импорта. Есть сообщение об ошибке в консоли или что-то в этом роде? – Darkmiller

Я обновил свой вопрос, нет ошибки в консоли – Nilesh

Вы не создаете приложение AngularJS в любом месте своего сценария. Вам необходимо указать имя приложения в качестве аргумента ng-app в теге body и изменить код script.

Функцию userListController необходимо подключить к контроллеру AngularJS, используя app.controller.

Пожалуйста, обратитесь к следующей рабочей скрипку:

https://jsfiddle.net/akonchady/7kfv4ssk/1/

источник

2016-04-20 17:41:41

Angularjs не дает данные от контроллера

ответ

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