1
我剛剛下載了Visual Studio的AngularJS SPA模板，並開始使用我的第一個應用程序。我已經面臨很多問題了！綁定沒有發生與AngularJS
下面是我的PersonView：
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Add Person</title>
<script src="~/Scripts/vendor/angular.js"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<script src="~/Scripts/controllers.js"></script>
</head>
<body ng-controller="PersonCtrl">
<form name="A" ng-controller="PersonCtrl">
<div class="row" >
<div class="col-md-2">
First Name:
</div>
<div>
<input type="text" name="input" ng-model="$firstName"
ng-pattern="word" ng-required="true" />
</div>
</div>
</form>
<form name="B" ng-controller="PersonCtrl">
<div class="row" >
<div class="col-md-2">
Middle Name:
</div>
<div>
<input type="text" name="middleName" ng-model="$middleName"
ng-pattern="word" ng-required="true" />
</div>
</div>
</form>
<form name="C" ng-controller="PersonCtrl">
<div class="row" >
<div class="col-md-2">
Last Name:
</div>
<div>
<input type="text" name="lastName" ng-model="$lastName"
ng-pattern="word" ng-required="true" />
</div>
</div>
</form>
<br />
Name : {{firstName + middleName + lastName}}
下面是我的控制器類：
'use strict';
// Google Analytics Collection APIs Reference:
// https://developers.google.com/analytics/devguides/collection/analyticsjs/
angular.module('app.controllers', [])
// Path:/
.controller('HomeCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window)
{
$scope.$root.title = 'AngularJS SPA Template for Visual Studio';
$scope.$on('$viewContentLoaded', function() {
$window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title
});
});
}])
// Path: /about
.controller('AboutCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
$scope.$root.title = 'AngularJS SPA | About';
$scope.$on('$viewContentLoaded', function() {
$window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
});
}])
// Path: /login
.controller('LoginCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
$scope.$root.title = 'AngularJS SPA | Sign In';
// TODO: Authorize a user
$scope.login = function() {
$location.path('/');
return false;
};
$scope.$on('$viewContentLoaded', function() {
$window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
});
}])
.controller('PersonCtrl', ['$scope', function($scope) {
//$scope.$root.title = 'Create Person';
$scope.firstName = 'Aditya';
$scope.lastName = 'Swami';
$scope.middleName = ' ';
}])
// Path: /error/404
.controller('Error404Ctrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
$scope.$root.title = 'Error 404: Page Not Found';
$scope.$on('$viewContentLoaded', function() {
$window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
});
}]);
而且我App.js
'use strict';
angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])
// Gets executed during the provider registrations and configuration phase. Only providers and constants can be
// injected here. This is to prevent accidental instantiation of services before they have been fully configured.
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/index',
controller: 'HomeCtrl'
})
.state('about', {
url: '/about',
templateUrl: '/views/about',
controller: 'AboutCtrl'
})
.state('login', {
url: '/login',
layout: 'basic',
templateUrl: '/views/login',
controller: 'LoginCtrl'
})
.state('person', {
url: '/PersonView',
layout: 'basic',
templateUrl: '/views/PersonView',
controller: 'PersonCtrl'
})
//.state('otherwise', {
// url: '*path',
// templateUrl: '/views/404',
// controller: 'Error404Ctrl'
//});
$locationProvider.html5Mode(true);
}])
.run(['$templateCache', '$rootScope', '$state', '$stateParams', function ($templateCache,$rootScope, $state, $stateParams) {
// <ui-view> contains a pre-rendered template for the current view
// caching it will prevent a round-trip to a server at the first page load
var view = angular.element('#ui-view');
$templateCache.put(view.data('tmpl-url'), view.html());
// Allows to retrieve UI Router state information from inside templates
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeSuccess', function (event, toState) {
// based on which page the user is located
$rootScope.layout = toState.layout;
});
}]);
我這樣下面lution結構如下所示：
這將是有益的，如果你創建一個plunker/jsfiddle等這個 – Dreamwalker 2014-09-26 12:42:53
我不確定這個！我只是創建我的第一個應用程序。我讀過帖子，並建議使用此模板。所以繼續與這 – adityaswami89 2014-09-26 12:44:36
對不起，忽略該評論我雖然它是純js和HTML :) – Dreamwalker 2014-09-26 13:08:50