I have index file :
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./js/jquery-1.9.1.js"></script>
<script src="./js/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="./Controller/homingController.js"></script>
<link rel = "stylesheet" href = "./css/angular-material.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel = "stylesheet" href = "./css/materialize.min.css">
<link href="./css/icon.css" rel="stylesheet">
<link rel ="stylesheet" href="./css/Main.css">
<title>Home Application</title>
</head>
<body ng-app="myApp">
<div class="navbar">
Home
about
</div>
<div ng-view></div>
<script>
</script>
</body>
</html>
My Controller
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.
when("/home", {
templateUrl: "home.html"
, controller: "homingController"
});
});
app.controller('homingController', function ($scope, $http) {
alert ("Hello");
var url = "workingURL"; /// changed function to a simple string message to
test
$scope.message = "Hello Liberals";
});
My View home.html
<h1>Hello</h1>
{{message}}
Neither its seems going into homingController and alerting Hello .
Nor its not loading view, infact when I debug its not going to controller. Is there anything I missing here ?
Please refer following link:
you need to just seperate js code and html code
https://jsfiddle.net/ok9he9b9/2/
Related
I'm trying to create a login/signup site in order to learn how to separate controllers and partial views, but I'm not sure why my 'LoginController' isn't being injected. Feel free to provide any other feedback.
app.js
angular.module('Registration', ['ngRoute'])
.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/login', {
templateUrl: 'app/login/login.html',
controller: 'LoginController'
})
.otherwise({ redirectTo: '/login' });
}]);
LoginController.js
angular.module('Registration')
.controller('LoginController', ['$scope', ($scope) => {
$scope.message = 'Does this work?';
}]);
login.html
<div class="col-md-offset-3 col-md-6">
{{ message }}
</div>
index.html
<!doctype html>
<html ng-app="Registration">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sup?</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div ng-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/login/LoginController.js"></script>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static('./public'));
app.listen(3000, () => {
console.log('Listening on port 3000.');
});
Directory Structure
Turns out you can't use an arrow function in the controller! Totally didn't mean to answer my own question.
Found the answer here: https://github.com/angular/angular.js/issues/14814
Just try to reach to your login route like http://localhost:8080/#/login
I cannot see my index page till I uncomment my code in controller.What am i doing wrong.here is my sample code.I have tried all possible options, not getting where am i going wrong
`
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script type="text/javascript">
var abc = angular.module('myApp', ["ui.router"])
.config(function($stateProvider,$urlRouterProvider){
$stateProvider.state('home',{
template: '<h1>This template is displayed with Ui route </h1>'
});
$urlRouterProvider.otherwise('/');
}).
controller('myNewCtrl',function($scope,$state){
// $state.go('home');
});
</script>
<title>My Angular App</title>
</head>
<body ng-app='myApp'>
<div ng-controller="myNewCtrl">
<ui-view></ui-view>
</div>
</body>
</html>`
DEMO
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
url: "#",
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl', ['$scope', function($scope) {
}])
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<nav>
<a ui-sref="home">Home</a>
</nav>
<div ui-view></div>
</body>
Working demo :
var myApp = angular.module('myApp',['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("home", {
template: "<h1>This template is displayed with Ui route </h1>",
controller: "myNewCtrl"
});
});
myApp.controller('myNewCtrl',['$scope','$state', function($scope,$state) {
$state.go('home');
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="myApp" ng-controller="myNewCtrl">
<div ui-view></div>
</div>
How can I config AngularJS to use $location but without any html5mode=true or any # in the URLs ?
Setting html5mode to false - makes $location.path to be empty
Plunker: http://plnkr.co/edit/g0G1HTuAdZWJPf2FMUMT
And the Plunker's code is:
html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script src="https://code.angularjs.org/1.4.0-beta.5/angular.js" data-semver="1.4.0-beta.5" data-require="angular.js#*"></script>
<script data-require="angular-route#*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular-route.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
<base href="/"/>
</head>
<body ng-controller="SiteCtrl">
<h1>Hello {{title}}!</h1>
<div >
Site path: {{path}}
</div>
</body>
</html>
script.js
angular.module('MyApp',['ngRoute'])
.config(function($locationProvider) {
$locationProvider.html5Mode(false);
})
.controller('SiteCtrl', function($scope, $location) {
$scope.title = "Bla";
$scope.path = $location.path();
})
In the simplest way ..
Thanks in advance.
I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>
Can I have loading some data once in angular module? I tried to use .run() but it gets called whenever page is accessed. For Example: say there are 2 html pages belonging to same module:
TestPage1.html:
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p><a ng-href="TestPage2.html">Go to Page2</a></p>
</body>
</html>
TestPage2.html:
<html ng-app="myApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<p><a ng-href="TestPage1.html">Go to Page1</a></p>
</body>
</html>
app.js:
var myApp = angular.module('myApp', []);
var cnt = 0;
myApp.run(['$rootScope', '$http', function(scope, $http) {
if(scope.loggedIn == undefined || scope.loggedIn == null) {
$http.get('rest/userData').success(function(data) {
cnt++;
alert(cnt);
scope.loggedIn = true;
});
}
}]);
When I navigate from one page to another this .run() is getting called again and again with cnt as 1. Is it possible to have it called once in life- time of module getting initialized? Or what is the other way?
It seems you are missing some basics such as a controller. The typical angular setup is having an ng-view for your app and loading the other pages via routing. Here is a simple example:
http://beta.plnkr.co/edit/RnZWeWxTJFri49Bvw50v?p=preview
app.js
var app = angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'TestPage1.html', controller: Page1Ctrl});
$routeProvider.when('/view2', {templateUrl: 'TestPage2.html', controller: Page2Ctrl});
$routeProvider.otherwise({redirectTo: '/view1'});
}]).run(function () { // instance-injector
alert('only run on first page load this is where you load data or whatever ONE time'); // this only runs ONE time
})
function MainCtrl($scope) {
$scope.name = 'main';
}
function Page1Ctrl($scope) {
$scope.name = 'page 1';
}
function Page2Ctrl($scope) {
$scope.name = 'page 2';
}
HTML:
<html ng-app="myApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
This is the main page. Main nav:
<a ng-href="#/view1">Go to Page1</a>
<a ng-href="#/view2">Go to Page2</a>
<div ng-view></div>
</body>
</html>
You will notice in the html there is an ng-view, when a route is encountered such as #/view the routeprovider looks it up and provides the correct template and calls the appropriate controller. I believe this is the kind of setup you are trying to achieve.