I am trying to build my first AngularJS routing code but I can't seem to get it to work and error console isn't of much help.
My HTML page:
<body ng-app="myApp">
<div ng-controller="AppController">
<div class="nav">
<ul>
<li>Template 1</li>
<li>Template 2</li>
<li>Template 3</li>
<li>SomePage</li>
<li>Otherwise</li>
</ul>
</div>
<div ng-view></div>
</div>
</body>
app.js:
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/template1', {
templateUrl:'partials/template_1.html'
})
.when('/template2', {
templateUrl:'partials/template_2.html'
})
.when('/template3', {
templateUrl:'partials/template_3.html'
})
.when('/somepage', {
templateUrl:'partials/somepage.html'
})
.otherwise({
redirectTo:'partials/otherwise.html'
});
});
Could someone please tell me what I'm doing wrong here?
Upgrade your angular.js version to 1.2.26 which is most stabled Angular Version.
Other code looks fine to me.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
Thanks.
Related
So I've been racking my brains for some time, looked at each and every line and I can't seem to find any mistake. Here are my codes:
HTML:
<body ng-app='myApp'>
<div class="wrapper">
<nav>
<ul ng-controller="pathController">
<li ng-click="changePath('about')">About</li>
<li ng-click="changePath('contacts')">Contacts</li>
<li ng-click="changePath('login')">Log In</li>
<li ng-click="changePath('register')">Join Now</li>
</ul>
</nav>
</div>
<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/angular/angular.min.js" type="text/javascript"></script>
<script src="node_modules/angular-route/angular-route.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="scripts/controllers/pathController.js" type="text/javascript"></script>
</body>
app.js:
var app = angular.module("myApp", ['ngRoute', 'ngController']);
app.config(["$locationProvider", "$routeProvider"],
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("");
$routeProvider.when('/', {
templateUrl: "index.html"
})
})
About that 'ngController' dependency - I added it afterwards, in the process of checking different things which could possibly fix it.
and pathController.js:
app.controller('pathController', function($scope) {
$scope.changePath = function(pth) {
window.location.pathname = pth;
}
})
As you can see, $routeProvider is not the issue. Please take a look and see if you can solve my problem.
P.S. I am sorry, I forgot to add the error that I am getting, I only wrote it in the title, here it is:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.7.4/ ...
Thanks in advance!
Try
var app = angular.module("myApp", ["ngRoute"]);
app.config(["$locationProvider", "$routeProvider",
function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("");
$routeProvider.when('/', {
templateUrl: "index.html"
})
}]
)
You have made below error:
app.config(["$locationProvider", "$routeProvider"], <-- this ] bracket should not be closed here.
Here is the working plunkr
I am trying to apply some jquery in my code, but it's not working because i am using with ng-include, how can i solve this?
html:
<html lang="" ng-app="">
<head></head>
<body>
<div class="menu">
<nav class="sidebar">
<nav class="sidebar">
<div ng-include="'app/client.html'"></div>
</nav>
</nav>
</div>
<script type="text/javascript">
$(function() {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});
</script>
</body>
</html>
client.html
<div class="client">
<div class="client-open">
<ul class="sidebar-nav">
<li>link1</li>
<li>link</li>
</ul>
</div>
</div>
js:
$(function() {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});
Code to alter the DOM directly should go into directive.
Create a directive and attach it to the element you are trying to modify.
Plunkr - https://plnkr.co/edit/AIRb3egGSMkWfd2gpekL?p=preview
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
angular.module('app', [])
.directive('attachJquery', function() {
return {
restrict: 'A',
link: function (scope, element) {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
}
};
})
</script>
<style>
.tech {
color: red;
}
</style>
</head>
<body>
<div class="menu">
<nav class="sidebar">
<nav class="sidebar">
<div ng-include="'client.html'"></div>
</nav>
</nav>
</div>
</body>
</html>
client.html
<div class="client" attach-jquery>
<div class="client-open">
<ul class="sidebar-nav">
<li>link1</li>
<li>link</li>
</ul>
</div>
</div>
First proposed solution
Make sure that Jquery is loaded in your application before AngularJs.
Move the script inside client.html
Second proposed solution
Make sure that Jquery is loaded in your application before AngularJs.
Move your script into the controller as in the following example
app.controller("myCtrl", function($scope, $rootScope,$timeout) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$rootScope.$on('$includeContentLoaded', function() {
$timeout(function(){
load();
});
});
});
And then enter your function as in the following example
var load = function() {
$( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
}
You can refer to this SO question for more info.
Angular: ng-include, jQuery not working unless in HTML file
One way of solving this is by creating a custom directive and adding it to div.client , then you can add your jquery code in the compile or link function of that directive.
HTML
<div class="client" load-evt>
...
</div>
Angular Directive
app.directive("loadEvt", function(){
return {
restrict: "A",
compile: function(elem){
//write your code in compile phase
},
link: function(elem, scope){
//or write your code in link phase
}
}
})
Why would you want to use jQuery and angular together?
These are 2 libraries that help you write a webapp, but go about it a VERY different way.
If you need jQuery to modify classes, you should simply use ng-class, as #fissio suggested. But in the usecase you provided, just add class="tech" to the second li. (I presume this isn't really what you wanted to know)
<div class="client">
<div class="client-open">
<ul class="sidebar-nav">
<li>link 1</li>
<li class="tech">link 2</li>
</ul>
</div>
</div>
Im new to angular and js
please help me getting json key and bind to ng-model
Following is my code
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-model="table.macid"></li>
</ul>
and my js is
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.table={}
$http.get("test.json")
.success(function(response) {
$scope.names = response
$scope.table.macid= Object.keys($scope.names.day.weekday.Monday.mac_id)
console.log($scope.table)
});
});
this is my plunker link http://plnkr.co/edit/6CoOAp0X8FZw1JODXSHT?p=preview
Any help is appreciated, Thanks in advance
You are confusing ng-model with ng-bind:
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-bind="table.macid"></li>
</ul>
See updated plunker
In case you need to iterate over the collection, use ng-repeat. See zszep answer for that.
You can dump it out on your html like this:
<li ng-model="table.macid"></li>{{table.macid}}
It should work, it did for me. You may think you see it because the tag is in an < li > element. What are you expecting that to do?
Use ng-repeat in the li tag like this plunker:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="macid in table.macid">{{macid}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.table={}
$http.get("test.json")
.success(function(response) {
$scope.names = response
$scope.table.macid= Object.keys($scope.names.day.weekday.Monday.mac_id)
});console.log($scope.table)
});
</script>
</body>
</html>
I have a very simple app. When I start the app it works fine, both angular and angular-route are loaded, the config function is executed and "otherwise" works as intended.
However, both boxes and versions do not work and no HTML is injected. The main page just says
<!-- ngView: -->
and that's it.
THERE ARE 0 ERROR MESSAGES!!! The console is just empty as a desert.
I tried everything and it should work but it doesn't. I even tried replacing the browserify calls and including angular directly in the html - no success.
HTML:
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>app</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="mainheader">
<div class="client-logo"></div>
<div class="logo"></div>
</header>
<nav class="mainmenu">
<ul>
<li class="active">Boxes</li>
<li>Versions</li>
</ul>
</nav>
<div ng-view></div>
<footer></footer>
</body>
<script src="./js/bundle.js"></script>
</html>
My JS:
'use strict';
require('angular/angular');
require('angular-route/angular-route');
var controllers = require('./controllers');
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/boxes', {
tamplate: 'views/boxes.html',
controller: 'boxController'
})
.when('/versions', {
tamplate: 'views/versions.html',
controller: 'versionsController'
})
.otherwise({
redirectTo: '/boxes'
});
}
]);
app.controller('boxController', controllers.boxController);
app.controller('versionsController', controllers.versionsController);
Example view:
<h2>Boxes</h2>
<p>{{ message }}</p>
Example controler:
'use strict';
exports.boxController = function($scope) {
$scope.message = 'Box Controller';
console.log('boxes');
};
exports.versionsController = function($scope) {
$scope.message = 'Versions Controller';
console.log('versions');
};
I'm as stupid as they come, the problem is a spelling error, it's tEmplate!
Thanks for the responses.
I'm learning Angular.js right now by following along with the videos at Egghead.io. I'm at the $routeProvider video, and my app isn't routing at all.
It's ultra basic, here's the script (app.js):
var app = angular.module('myApp', []);
// routes
app.config(function ($routeProvider) {
$routeProvider.when('/pizza', { template: 'Yum!!' });
});
app.controller('FirstCtrl', function ($scope) {
$scope.data = { message: "Hello" };
});
And the html:
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
{{data.message + " world"}}
</div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min.js"></script>
<script src="app.js"></script>
From my understanding, http://host/#/pizza should simply show "Yum!!" since I'm passing a string in the template. It doesn't appear to do anything though, I still get "Hello world" as evaluated by the FirstCtrl.
Why isn't the $routeProvider doing anything in my app?
You need to put an ng-view element in where you want the routeProvider to stick the page's template.
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
{{data.message + " world"}}
<ng-view></ng-view>
</div>
</div>
Note that indicating it like below keeps you cross-browser compliant.
<div ng-view> </div>
or, for that matter:
<ANY ng-view> </ANY>
More information is available here:
http://docs.angularjs.org/api/ng.directive:ngView