I just started with angular and I've been experimenting with single page website, so I've basically just created really simple html to change, such as:
login.html
<div>
<h1>login</h1>
</div>
register.html
<div>
<h1>login</h1>
</div>
But when I click the links below leading to login.html and register.html, nothing happens.
Index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
login
register
<div ng-view>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
And here is where my module lies
app.js
'use strict';
var app = angular.module('myApp', []);
app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when("/", {
templateURL : "view/login.html",
})
.when("/register", {
templateUrl : "view/register.html"
})
.otherwise({redirectTo: '/login'});
}]);
I'm using JetBrains WebStorm for the premade angular html file, and local server.
Thank you
Let try with this way
angular.module('myApp', ['ngRoute']);
login
register
The problem lied with the server I was running, it was not properly set up.
Related
Now I have read that angular doesn't allow global controllers but I don't believe I am making it global. What is even more odd is that I even created a script in the HTML file and it gave me the same error. I am positive that code should have worked.
I am using Intellij and used its template to generate a small boiler plate via bower.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="myApplication">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</body>
</html>
clickablecontroller.js
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
----------------UPDATE 1 -----------
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
clickable is your controller. If you want to output value of click property you need {{click}}. Angular will know what the controller is and show to value of click property of $scope in that controller.
Maybe you can try this:
var myModule = angular.module('myApplication', []);
myModule.controller('clickable', function ($scope) {
$scope.clickMe = function(){
$scope.click = click++;
}
});
Besides,
use {{click}} to instead of {{clickable.click}}
I had to had my new module in my apps.js file.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApplication'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Then I had to declare click as a variable like so:
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
console.log("I am in the controller")
var click = 0
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Then in my index.html file I could simply use:
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{click}}
</div>
The app doesn't route to the view. It just shows index.html view it doesn't work seeing any other of the views. It worked fine before changing the router. I also tried to change the ng-view to ui-view in index.html but still nothing happens.
looking in chrome devtools, I can see that both angular and ui-router are being loaded so it must be something in the code. I hope someone with experience can notice it. Big thanks!
My index.html and app.js:
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ui.router',
'myApp.jokes',
'myApp.view1',
'myApp.view2',
'myApp.auth',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view_auth/auth.js"></script>
<script src="view_jokes/jokes.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
You're loading your template and controller in a named view
views: {
'jokesContent': {
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
}
but you dont define that view.
you have to use: ui-view="jokesContent"
or rewrite your router config not to use named views
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
templateUrl: "view_auth/auth.html",
controller: 'AuthCtrl as auth'
})
}])
After seeing your code the first thing I can notice is you are using ng-view instead of ui-view. Since you are using ui-router in your application you need to use ui-view not ng-view.
So just change it like above and check it once.
I ended my Angular JS app...
and now what?
I have a app with 10 scripts src in index.html, 6 ng includes,...
All this are http requests, and have a relative size...
There are some particular way or command for "compile/build/generate/deploy" end app code? with all included, minified,...
Or I must do this with grunt/gulp :(?
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Bit2Card" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta name="description" content="Generate a credit card on fly with Bitcoins">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="reset.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="app" ng-controller="appController" class="{{viewBack ? 'viewBack' : ''}}">
<ng-include src="'partials/overlays/load.html'"></ng-include>
<ng-include src="'partials/overlays/error.html'"></ng-include>
<ng-include src="'partials/overlays/terms.html'"></ng-include>
<ng-include src="'partials/overlays/qr.html'"></ng-include>
<ng-include src="'partials/overlays/payout.html'"></ng-include>
<ng-include src="'partials/overlays/restart.html'"></ng-include>
<div id="flip">
<div id="frontCard">
<ng-include src="'partials/header.html'"></ng-include>
<div id="panels">
<div id="select" class="panel{{panel === 1 ? ' visible' : ''}}" ng-include="'partials/panels/select.html'"></div>
<div id="pay" class="panel{{panel === 2 ? ' visible' : ''}}" ng-include="'partials/panels/pay.html'"></div>
<div id="get" class="panel{{panel === 3 ? ' visible' : ''}}" ng-include="'partials/panels/get.html'"></div>
</div>
<ng-include src="'partials/footer.html'"></ng-include>
</div>
<div id="backCard" ng-include="'partials/backside.html'"></div>
</div>
</div>
<!--
In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="bower_components/ng-clip/dest/ng-clip.min.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script type="text/javascript" src="scripts/lin2a.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
I think you should check out: https://www.npmjs.org/package/gulp-html-replace. It will read through that html for you and insert a new script tag in there that points to a bundled version of all those deps.
I seem not to be able to redo a simple directive tutorial in cloud9. Basically it does not produce the output "Here I am to save the day".
main2.js
var app = angular.module("superhero", []);
app.directive("superman", function() {
return {
restrict: "E",
template: "<div>Here I am to save the day</div>"
}
})
This function is loaded in the index file here as shown below. In addition I have another file called main.js where I declare the app "myApp", but even removing that does not help.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div ng-app="superhero">
<superman></superman>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="main.js"></script>
<script src="main2.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
You need to load the main2.js script (and the angular files) before
<div ng-app="superhero">
<superman></superman>
</div>
I tried in jsfiddle.net and it only appears to work when the javascript is loaded in the head of the page before the HTML.
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>