I'm trying to get my first AngualarJS app going but it won't work for some reason. Been googling for a while now and haven't found a solution that works for me yet.
Can anyone with some AngularJS exp see what's wrong with my code?
Appreciate any help!
<!doctype html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<div id="container">
<nav class="col-xs-12">
<table id="navTable">
<tr>
<td><p>view 1</p></td>
<td><p>view 2</p></td>
<td><p>view 3</p></td>
<td><p>view 4</p></td>
<td><p>view 5</p></td>
</tr>
</table>
</nav>
<!-- View Placeholder -->
<article data-ng-view="" class="col-xs-6 col-xs-offset-3">
Views goes here...
</article>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller: 'basicController',
templateUrl: '/partials/viewOne.html'
})
.when('/menu', {
controller: 'basicController',
templateUrl: '/partials/viewTwo.html'
})
.when('/map',
{
controller: 'basicController',
templateUrl: '/partials/viewThree.html'
})
.when('/info',
{
controller: 'basicController',
templateUrl: '/partials/viewFour.html'
})
.when('/offers',
{
controller: 'basicController',
templateUrl: '/partials/viewFive.html'
})
.when('/account',
{
controller: 'basicController',
templateUrl: '/partials/viewSix.html'
})
.otherwise({ redirectTo: '/' });
}]);
app.controller('basicController', ['$scope', function ($scope) {
$scope.message = "Hello!";
}]);
</script>
<footer class="col-xs-12 navbar-fixed-bottom">
</footer>
</div>
</body>
</html>
I would like to start with advising you to follow this official tutorial: it shows you the beginnings of how to build an app with AngularJS and views. The reason I would advise this is because there are quite a few basic elements that are missing from the script, mostly the <a> tags. Maybe you can start from the tutorial and build your own code based on that.
Remarks about your code:
Add all your script tags with javascript in your <head>. These will then in turn be run by a browser, making sure that all dependencies are met
You forgot a comma after "app" in your module initialization
Most important, you should change your <p> tags to <a> tags if you want views to work. Angular uses the <a>-tags to make navigation to different views possible. The href attribute of an <a> tag is used for this. Check my code below and you can see that my href attributes are linked to the routeprovider in the when clause.
Below you will find your adjusted code. Hope it helps!
<!doctype html>
<html data-ng-app="app">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'basicController',
templateUrl: 'partials/viewOne.html'
})
.when('/menu', {
controller: 'basicController',
templateUrl: 'partials/viewTwo.html'
})
.when('/map',
{
controller: 'basicController',
templateUrl: 'partials/viewThree.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('basicController', ['$scope', function ($scope) {
$scope.message = "Hello!";
}]);
</script>
</head>
<body>
<div id="container">
<nav class="col-xs-12">
<table id="navTable">
<tr>
<td>view 1</td>
<td>view 2</td>
<td>view 3</td>
</tr>
</table>
</nav>
<!-- View Placeholder -->
<article data-ng-view="" class="col-xs-6 col-xs-offset-3">
Views goes here...
</article>
<footer class="col-xs-12 navbar-fixed-bottom"></footer>
</div>
</body>
</html>
Related
Im uning angular to make page login, I use template login.html and controller login.html, the problem is when I call login controller the main controller will be executed automatically !
and I found : warning: tried to load angular more than once.
this is my JS:
trainingApp.config(['$routeProvider' ,function($routeProvider){
$routeProvider
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo : "/"
});
}]);
trainingApp.controller('loginCtrl',['$scope', function($scope){
$scope.alertt = function(){
// console.log("ok");
alert("okkkkkkk");
}
}]);
trainingApp.controller('mainCtrl', ['$scope','$timeout', 'apiService','$location', function ($scope,$timeout, apiService,$location) {
console.log('hello');
}]);
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Plannification Des Formations</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="controllers/mainCrtl.js"></script>
<script src="services/apiService.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl" ng-view>
.......
</body>
</html>
login.html
<button id="btn-login" class="btn btn-success " ng-href="#!/">Login </button>
Please remove ng-controller="mainCtrl" from your html, as you have already defined controller in $routeProvider config.
Please change your code like this.
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl',
abstract: true,
})
I'm new to Angular but this has been a bit of an issue.
So if I visit localhost:9000 I am greeted with the index view. If I click on my navbar link to the /about link, I am taken to http://localhost:9000/about and I am greeted with the about view.
However, if I refresh that page when I'm on the /about route. It breaks and tells me: Cannot GET /about If I go back to index it begins to work again. If I refresh on the index it doesn't break.
I set $locationProvider.html5Mode(true); as well as add <base href="/"> to the head of my index.html file.
Here is the relevant information from my files. (also I'm using Chrome)
app.js
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
$locationProvider.html5Mode(true);
}]);
myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}]);
myApp.controller('aboutController', ['$scope', function($scope) {
}]);
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
use href="#!/about/" in html because it is changed in angularjs.1.6 href="#/about" not work for it
use below HTML code
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="#!/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
I have included my dependencies for using Angular UI router but when I run my application I keep receiving an error stating: $urlRouteProvider is not defined. It seems to not be recognizing UI router and is immediately forward to the .otherwise instead of activating the initial login state.
Here is my code:
app.js --
var app = angular.module("demoApp", ["ngVidBg", "ngAnimate","ui.router"]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: 'SignUpCtrl'
})
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
resolve: {
logincheck: checkLoggedin
}
})
$urlRouteProvider.otherwise('/views/login');
}]);
index.html--
<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/vidBg.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav ng-controller="NavCtrl">
<span ng-show="!currentUser">
</span>
</nav>
<div ng-view>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.js"></script>
<script src="./js/app.js" type="text/javascript"></script>
<script src="./js/controllers.js" type="text/javascript"></script>
<script src="./js/vidBg.js" type="text/javascript"></script>
</body>
</html>
Its typo at the $urlRouteProvider.otherwise line, it should be
$urlRouterProvider
instead of
$urlRouteProvider
$urlRouterProvider Doc
While learning/reading angular docs, it warns about declaring the controller again using ng-controller.
Does this describe my code below, declaring MainMenuCtrl twice. First in the app.js and the second time in the body tag of index.html? Thanks
//---index.html-------------------------------
<!doctype html>
<html lang="en" ng-app="angApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/project_student/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/first_page.js"></script>
<script src="js/controllers/second_page.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body ng-controller="MainMenuCtrl"> //<<------1st declare-----------------
<header>
<button class="menuLeft" type="button" ng-click="toggleList()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main class="listview" ng-hide="showListView" ng-view></main>
<footer id="footer" class="footer">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
//---app.js-------------------------------
(function () { //y010
'use strict';
angular
.module('angApp', ['ngRoute', 'MainMenuCtrl']) //<<------2nd declare-----------
.config(['$routeProvider', routeProvider]); //y024
})();
function routeProvider ($routeProvider) {
$routeProvider.when('/menuItems', {
url: "/menuItems",
templateUrl: 'views/mainMenu.html',
controller: 'MainMenuCtrl' //<<-------- called-------------
}).when('/first_page', {
url: "/first_page",
templateUrl: 'views/first_page.html',
controller: 'FirstPageController'
}).when('/second_page', {
url: "/second_page",
templateUrl: 'views/second_page.html',
controller: 'SecondPageController'
})
.otherwise({ //home page
redirectTo: '/menuItems'
});
}
No, you are declaring it only once. In the template you are just declaring that body and its contents should come in the scope of the controller.
Ive just started to learn AngularJS and im trying to use angular-route but can't get it to work.
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="fantasySportsApp">
<head>
<title></title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Content/Style/bootstrap.min.css"/>
<!--Placeholder for views-->
<div data-ng-view="">
Hejsan
ge
</div>
<script src="Content/Scripts/jQuery-1.11.0.js"></script>
<script src="Content/Scripts/jquery-ui.js"></script>
<script src="Content/Scripts/angular.min.js"></script>
<script src="Content/Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
<script src="Content/Scripts/bootstrap.min.js"></script>
</body>
</html>
my app.js looks like this:
var fantasySportsApp = angular.module('fantasySportsApp', ['ngRoute']);
fantasySportsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
controller: 'userController',
templateUrl: 'App/partials/login.html'
})
.when('/startPage', {
controller: 'startPageController',
templateUrl: '/App/partials/startPage.html'
})
.otherwise({ redirectTo: "/index" });
});
when i start my page ill get to this url: localhost:26283/index.html#/index but it wont show me anything. the page is empty. If i inspect the html i find this in the code: "<-- ngView: -->" think indicates that the partial view that i try to route to is supposed to start but there is nothing under the tag.
What could be the problem?