I am new to angular js
I was trying to load another html dyamically, below is the code i was trying
My Base HTML include
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
</head>
<body>
<div ng-view></div>
<script src="Module/app.js"></script>
</body>
</html>
and my app JS
var app = angular.module('LoginModule', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/login',
{
controller: '',
templateUrl: '/Module/View/Login/Login.html'
})
.otherwise({ redirectTo: '/login' });
});
Put your jquery and angular script in the body tag:
<!DOCTYPE html>
<html data-ng-app="LoginModule">
<head>
<title></title>
</head>
<body>
<div ng-view></div>
<script src="Resource/jquery-1.10.2.min.js"></script>
<script src="Resource/angular.min.js"></script>
<script src="Resource/angular-route.js"></script>
<script src="Module/app.js"></script>
</body>
</html>
Also I would set ng-view with ng-view=""
<div ng-view=""></div>
EDIT:
You forgot to include the ngRoute module. Please look at the following plnkr to more detail: http://plnkr.co/edit/A5X4BNsnuXxhmgPVOXpv
var app = angular.module('LoginModule', ['ngRoute']);
Related
I am working on a simple application of AngularJs. I use cloud9 as an Ide and install Angular through bower in my project, but still get an error "angular not defined" in my .js file.
Here is my code please help me.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
You are not able to load angular.min.js on your page.
Try by changing like this:
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Welcome to BlogIt!";
})
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
You are missing ng-app
<body ng-app="myApp" ng-controller="myCtrl">
Add ng-app in your program.
It's the starting point of the application.
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings
my app.js file:
var app = angular.module("CRI", ["ui.router"]);
app.config(function ($stateProvider) {
$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})
index.html file:
<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>
<body>
<div ui-view></div>
</body>
</html>
controller:
app.controller("LoginController", function($scope, $http){
})
template is saved in views/login.html
To use the root path, the state config url property should be an empty string, not '/'.
$stateProvider.state("Login", {
url: "",
controller: "LoginController",
templateUrl: "views/login.html"
});
http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview
When I type http://localhost:8000 in the browser, it is redirecting to http://localhost:8000/home. This is working fine as per code. When I refresh the page with same http://localhost:8000/home getting 404 error. Can anyone help me why this is happening and correct me.
app.js
var myapp=angular
.module("demo",['ngRoute'])
.config(function ($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
templateUrl:'Templates/home.html',
controller:'homeController'
})
.when('/about', {
templateUrl:'Templates/about.html',
controller:'aboutController'
})
.when('/contact',{
templateUrl:'Templates/contact.html',
controller:'contactController'
})
.otherwise({
redirectTo: '/home'
})
$locationProvider.html5Mode(true);
});
index.html
<!doctype html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="rest-controller.component.js"></script>
<script src="Controllers/contact.js"></script>
<script src="Controllers/about.js"></script>
<script src="Controllers/home.js"></script>
<base href="/">
</head>
<body>
<ol>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ol>
<div ng-view></div>
</body>
</html>
home.js (controller file)
angular.module('demo').controller("homeController", function($scope){
$scope.hello ="home";
});
about.js
angular.module('demo').controller("aboutController", function($scope){
$scope.tap="About Me";
});
contact.js
angular.module('demo').controller("contactController", function($scope){
$scope.message="hello";
});
Can you try disabling html5 mode?
// $locationProvider.html5Mode(true);
I am new to angular.js. I am getting the following error while executing a simple controller example.
Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=Mycontroller&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
script.js
var Mycontroller = function($scope){
$scope.message = "Hello Angular";
};
Output:
{{message}}
Where am i going wrong?
You should create a module, and then attach a controller to it. This is the angular way. Your code should look like this.
<html ng-app="my-app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Mycontroller">
<h1>{{message}}</h1>
</body>
</html>
In your JavaScript file, you should have this
angular.module('my-app', [])
.controller('Mycontroller', function($scope) {
$scope.message = "Hello Angular";
});
Plunker: http://plnkr.co/edit/tYIQOlNALzco9zobAIO0?p=preview
try this it works
HTML page
<!doctype html>
<html ng-app="MyApp">
<head>
<title>HTML page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
<p>{{message}}</p>
</div>
</body>
hello.js
var app = angular.module("MyApp", []);
app.controller("Hello", function($scope, $http){Helloz($scope, $http);});
function Helloz($scope, $http) {
//$http.get('http://rest-service.guides.spring.io/greeting').
$http.get('/person').
then(function(data) {
$scope.greeting =angular.fromJson(data).data;
$scope.message=angular.fromJson(data).data;
},null);
}