I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.
Its probably something obvious, thanks for any help in advance.
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/Styles.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
</head>
<body>
<a href="#/">
<button class="btn btn-danger">Homepage</button></a>
<a href="#/about">
<button class="btn btn-success">About</button></a>
<a href="#/date">
<button class="btn btn-warning">Date</button></a>
<div class="row">
<div ng-view>
</div>
</div>
<script src="SinglePageApp/app.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
</body>
</html>
app.js file
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
Try this plunker:
http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/
I've used the example at the angularJS documentation to create your usecase.
You should change the template filepaths, with your own. I also haven't included bootstrap.
If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.
Here's fiddle for you that works as expected
Not sure why your code is not working, angular has pretty bad debugging tool.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
<a href="#/">
<button class="btn btn-danger">Homepage</button>
</a>
<a href="#/about">
<button class="btn btn-success">About</button>
</a>
<a href="#/date">
<button class="btn btn-warning">Date</button>
</a>
<div class="row">
<div ng-view></div>
</div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
{{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
{{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
{{dateNow}}
</script>
Script file looks like this
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
//default page
.when('/', {
templateUrl: "pages/homepage.html",
controller: 'HomeCtrl'
})
//about page
.when('/about', {
templateUrl: "pages/about.html",
controller: 'AboutCtrl'
})
//date page
.when('/date', {
templateUrl: "pages/date.html",
controller: 'DateCtrl'
})
.otherwise({redirectTo:'/'});
});
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.homepage = "Homepage";
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.about = "Lorem ipsum............";
}]);
app.controller('DateCtrl', ['$scope', function ($scope) {
$scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);
Related
I have been following the tutorial:
https://thinkster.io/angular-rails#angular-routing
I have not done any rails integration yet, the question is specifically to angular.
When I do the hello worlds from the MainCtrl without using the router, everything works. When I use the router, I cannot get the inline angular template to display in my html page. Where is the error here?
app.js:
angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}])
angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world';
}]);
index.html:
<html>
<head>
<title>My Angular App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view> <!-- this is supposed to display the template below but it shows nothing -->
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</script>
</body>
</html>
Your controller is recreating the module instead of referencing it. Change it like so:
angular.module('flapperNews')
.controller('MainCtrl', [
'$scope',
function($scope){
$scope.test = 'Hello world';
}]);
You're defining the 'flapperNews' module twice. Remove the second angular.module('flapperNews', []).
I am playing with angularjs, and I cannot find the reason why ng-view does not work. What am I doing wrong?
var app = angular.module('Demo', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('#/about', {
templateUrl: 'about.html',
controller: 'homeController'
});
$routeProvider.when('#/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src=""//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js""></script>
<body ng-app>
<div class="menu">
<ul>
<li>About</li>
<li>Contacts</li>
</ul>
</div>
<div class="MainContent">
<div ng-view></div>
</div>
<template id="about.html">
about
</template>
<template id="contacts.html">
contacts
</template>
</body>
There were a few issues here:
Your script source for angular-route was incorrect in the HTML portion.
Your $routeProvider.when lines do not need '#', so I removed them.
One of your templates used templateUrl, which was not correct. It should only be template: as you are not calling a URL.
Here is a working plunker:
https://plnkr.co/edit/GSoJ4sAxM8joH6zmrxjf?p=preview
var app = angular.module('demo', ['ngRoute'])
// URLs should not have # in them
.config(function ($routeProvider) {
$routeProvider.when('/about', {
template: 'about.html',
controller: 'homeController'
});
$routeProvider.when('/contacts', {
template: 'contacts.html',
controller: 'contactsController'
});
});
app.controller('homeController', function ($scope) {
alert('homeController');
});
app.controller('contactsController', function ($scope) {
alert('contactsController');
});
I'm trying to implement a modal from angular ui bootstrap. After I implemented it on my web application, I got an unexpected behavior which is the modal does show up after I clicked the text, but what shows up is not the path that I wanted but rather the navbar of the web app.
Here's the code
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<base href='/'>
<!-- load bootstrap from CDN and custom CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="app.js"></script>
<script type="text/javascript" src="controller.js"></script>
</head>
<body>
<header>
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<span class="glyphicon glyphicon-book"></span>Testing App
</div>
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
<li>Write</li>
</ul>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
angular.module('MyApp', ['ngRoute', 'ui.bootstrap'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
});
$locationProvider.html5Mode(true);
});
controller.js
angular.module('MyApp')
.controller('HomeController', function($scope, $location) {
$scope.data = "Hello Angular";
})
.controller('ModalController', function($scope, $location, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: function() {
},
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
});
home.html
<div class="container">
<h1>Awesome {{ data }}</h1>
</div>
modal.html (The path that the modal suppose to show);
<h1>Need to show this actually</h1>
The picture, what shows up after i clicked the text that trigger the modal event
Added this:
<script type="text/ng-template" id="modal.html">
<h1>Need to show this actually</h1>
</script>
right after
<ul class="nav navbar-nav navbar-right" ng-controller="ModalController">
and it works in plunker:
http://plnkr.co/edit/bPuemujbTiX7U8AnY607?p=preview
I am trying to make a modal which can be instantiated from multiple places in the app. from the example given here: Angular directives for Bootstrap the modal controller is in the same file as the controller who instantiates the modal. I want to separate the modal controller from the "app" controller.
index.html:
<!DOCTYPE html>
<html ng-app="modalTest">
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="modalTestCtrl">
<button ng-click="openModal()">Modal</button>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="modalTest.js"></script>
</body>
</html>
The controller:
var app = angular.module('modalTest', ['ui.bootstrap']);
app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: 'modalCtrl',
size: 'sm'
});
}
}]);
// I want this in another JavaScript file...
app.controller('modalCtrl', ['$scope', function($scope) {
$scope.hello = 'Works';
}]);
modal.html:
<div ng-controller="modalCtrl">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h1>{{hello}}</h1>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
Is there any way to put the modalCtrl in another JavaScript file and somehow inject the controller (modalCtrl) into the modalTestCtrl ?
BR
Of course, you can do it. First of all you should use a function declaration.
// modalCtrl.js
// This file has to load before modalTestCtrl controller
function modalCtrl ($scope) {
$scope.hello = 'Works';
};
Then, change the modalTestCtrl like:
app.controller('modalTestCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl: 'modal.html',
controller: modalCtrl, //This must be a referance, not a string
size: 'sm'
});
}
}]);
With the changes above, you code has to work.
I'm new to angular and am trying to tweek the tutorial to my app. I'm trying to add routes to my app and it doesn't seem to be reading my templates or reading the controller correctly. I installed the angularJS extension for Chrome (pretty awesome by the way) and it shows my scope as empty, no models.
Here's my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Map Test</title>
<script src="../lib/angular/angular.js"></script>
<script src="../lib/angular/angular-route.js"></script>
<script src="../resources/app.js"></script>
<script src="../resources/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
Here's my app module (app.js):
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateURL: 'partials/mapType-list.html',
controller: 'MapListCtrl'
}).
when('/maptypes/:type', {
templateURL: 'partials/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
Here's my controllers module (controllers.js):
var biosatAppControllers = angular.module('biosatAppControllers', []);
biosatAppControllers.controller('MapListCtrl', ['$scope', '$http',
function ($scope, $http) {
$http.get('../resources/maptypes.json').success(function (data) {
$scope.mapTypes = data;
});
}]);
biosatAppControllers.controller('MapTypeCtrl', ['$scope', '$routeParams',
function ($scope, $routeParams) {
$scope.type = $routeParams.type
}]);
Here's mapType-list.html:
<select onchange="location = this.options[this.selectedIndex].value;">
<option ng-repeat="map in mapTypes" value="#/maptypes/{{map.type}}">
{{map.caption}}
</option>
</select>
Here's mapType-detail.html:
<div>
{{type}}
<div id="legendContainer" style="width: 300px; height: 800px; overflow-y: auto; float: left;">Legend Div</div>
<div id="mapDiv" style="height:800px;">Map Div</div>
</div>
The maptypes.json is valid json and it loaded successfully before I tried to ngRoute.
When I run the code it successfully navigates the app to /maptypes (the otherwise statement in $routeProvider). But it doesn't bring up the mapType-list html, which should be a simple drop down list. I get no errors in my console or anywhere else that says something isn't loading correctly or something's not found. Also, when I run it the ng-view div element:
<div ng-view></div>
get's replaced with a comment:
<!-- ngView: -->
I'm sure it's something very simple that I'm missing or got wrong, but I've looked through the code over and over and I can't look at it anymore.
Try changing your app config to
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
//Your routing here...
Also add <base href="/"> to head of your HTML file.
Here the example I did using the same code
sample1.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="bioSatApp">
<head>
<title>Test</title>
</head>
<body>
<div ng-view></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="app1.js"></script>
<script src="controllers.js"></script>
</body>
</html>
With app1.js I did different of you because I deleted 2 lines from here:
var bioSatApp = angular.module('bioSatApp', [
'ngRoute',
'biosatAppControllers'
]);
'ngRoute'
'biosatAppControllers'
and also I changed templateURL for templateUrl
This is the result without the 2 lines:
var bioSatApp = angular.module('bioSatApp', []);
bioSatApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/maptypes', {
templateUrl: 'templates/mapType-list.html'
}).
when('/maptypes/:type', {
templateUrl: 'templates/mapType-detail.html',
controller: 'MapTypeCtrl'
}).
otherwise({
redirectTo: '/maptypes'
});
}]);
All the others files are the same