尝试添加 ng-app 名称不会在应用程序中给出预期的输出
Trying to add ng-app name does not give expected output in Application
我正在尝试在我的示例 AngularJS 应用程序中添加一个 ng-app
标签。
每当我尝试添加这样的名称时 ng-app="myapplication"
,网页就会停止工作。应该会在 Hello 之后打印在输入框中输入的名称,如下所示。
示例代码:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>First App</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myapplication">
<h1>Sample AJS</h1>
<div >
<p>Enter your Name : <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind = "name"></span> !</p>
</div>
</body>
</html>
如果我将 ng-app="myapplication"
替换为 ng-app=""
,它会给出预期的输出。
我尝试将 ng-app
与 <div ng-app="myapplication">
和
一起使用
<!DOCTYPE html>
<html ng-app="myapplication" >
但是如果给 ng-app
命名,网页不会填充在文本框中输入的名称
可能出了什么问题。感谢您的帮助!
IDE : WebStorm2016.2
OS: Windows 7
编辑:
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
<div ng-app="myApp">
中对 myApp 模块的引用来自 angular.module('myApp', [])
。所以你必须使用 ng-app="myApp"
而不是 ng-app="myapplication"
正如@hsiung 评论的那样-
"The name of your module is whatever you give to it as your first argument, in this case 'myApp'. Putting ng-app in the html let's angular know what module you want to use as the main application module. The way it knows which one you want is by matching up the names, otherwise it won't be able to find it."
这里有更多解释ng-app
尝试将您的 app.js 文件包含到 html 文件中
<script src="path/to/app.js"></script>
我正在尝试在我的示例 AngularJS 应用程序中添加一个 ng-app
标签。
每当我尝试添加这样的名称时 ng-app="myapplication"
,网页就会停止工作。应该会在 Hello 之后打印在输入框中输入的名称,如下所示。
示例代码:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>First App</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myapplication">
<h1>Sample AJS</h1>
<div >
<p>Enter your Name : <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind = "name"></span> !</p>
</div>
</body>
</html>
如果我将 ng-app="myapplication"
替换为 ng-app=""
,它会给出预期的输出。
我尝试将 ng-app
与 <div ng-app="myapplication">
和
<!DOCTYPE html>
<html ng-app="myapplication" >
但是如果给 ng-app
可能出了什么问题。感谢您的帮助!
IDE : WebStorm2016.2
OS: Windows 7
编辑:
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
<div ng-app="myApp">
中对 myApp 模块的引用来自 angular.module('myApp', [])
。所以你必须使用 ng-app="myApp"
而不是 ng-app="myapplication"
正如@hsiung 评论的那样-
"The name of your module is whatever you give to it as your first argument, in this case 'myApp'. Putting ng-app in the html let's angular know what module you want to use as the main application module. The way it knows which one you want is by matching up the names, otherwise it won't be able to find it."
这里有更多解释ng-app
尝试将您的 app.js 文件包含到 html 文件中
<script src="path/to/app.js"></script>