I am very new to angular Js, I am using it with MVC application in dot net.There is a simple page containing a textbox to enter value.But as I call this page,the page starts getting refreshed.I dont know where I have gone wrong.Please help me for the same.
My JS
appRoot.controller('CreateSubjectController', function ($scope, $location, $resource) {
usersubject = {};
$scope.addSubject = function (subject) {
$scope.subject.subjectname = subject.subjectname;
}
});
My app.js
// Main configuration file. Sets up AngularJS module and routes and any other config objects
var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource', 'angularStart.services', 'angularStart.directives']); //Define the main module
appRoot
.config(['$routeProvider', function ($routeProvider) {
//Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
$routeProvider
.when('/home', { templateUrl: '/home/main', controller: 'MainController' })
.when('/contact', { templateUrl: '/home/contact', controller: 'ContactController' })
.when('/about', { templateUrl: '/home/about', controller: 'AboutController' })
.when('/demo', { templateUrl: '/home/demo', controller: 'DemoController' })
.when('/createSubject', { templateUrl: '/Subject/createSubject', controller: 'CreateSubjectController' })
.when('/angular', { templateUrl: '/home/angular' })
.otherwise({ redirectTo: '/home' });
}])
.controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
$scope.$on('$routeChangeSuccess', function (e, current, previous) {
$scope.activeViewPath = $location.path();
});
}]);
My view
#{
ViewBag.Title = "createSubject";
}
<h2>createSubject</h2>
<div>
<input type="text" data-ng-model="subject.subjectname" />
<input type="button" id="btnSubmit" class="btn" data-ng-click="addSubject(subject)" value="Save" />
</div>
my Master Page
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>AngularStart1</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/bootstrap")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body data-ng-app="main" data-ng-controller="RootController">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href='#/home'>AngularStart1</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li data-ng-class="{active : activeViewPath==='/home'}"><a href='#/home'>Home</a></li>
<li data-ng-class="{active : activeViewPath==='/demo'}">Demo</li>
<li data-ng-class="{active : activeViewPath==='/angular'}"><a href='#/angular'>Learn Angular</a></li>
<li data-ng-class="{active : activeViewPath==='/about'}"><a href='#/about'>About</a></li>
<li data-ng-class="{active : activeViewPath==='/contact'}"><a href='#/contact'>Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#Scripts.Render("~/bundles/app")
#RenderSection("scripts", required: false)
</body>
</html>
Related
I am trying to follow a tutorial from Dunebook.
https://www.dunebook.com/create-an-e-commerce-site-with-angularjs/4/
I've gotten stuck as the UI-view is not rendering (I am checking it is rendering as specified in the page I link to right above "Adding Animations to the view transitions"). I've looked this over a few times and i'm not sure what I am doing wrong...
The code.
Bower.Json
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-ui-router": "",
"angular-animate": "1.2.x",
"angular-facebook": "",
"angular-loader": "1.2.x",
"angular-mocks": "~1.2.x",
"html5-boilerplate": "~4.3.0"
}
}
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>AngularJS tutorial</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="css/app.css"/>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/simplex/bootstrap.min.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container">
<a class="navbar-brand" href="/">Garage Commerce</a>
<ul class="nav navbar-nav">
<li>Toys</li>
<li>Books</li>
</ul>
</nav>
<!--[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 class="container-fluid">
<div ui-view></div>
</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="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ui.router',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
])
config(['$stateProvider',
function($stateProvider) {
$stateProvider.state('add', {
url:'/add',
templateUrl: 'partials/add-products.html',
controller: 'AddProductsCtrl'
});
$stateProvider.state('category', {
url:'/:category',
templateUrl: 'partials/products.html',
controller: 'ProductsCtrl'
});
$stateProvider.state('category.products', {
url:'/:id',
templateUrl: 'partials/products.details.html',
controller: 'ProductDetailsCtrl'
});
}
])
controllers.js
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).controller('ProductsCtrl', ['$scope', '$stateParams',
function($scope, $stateParams) {
$scope.category = $stateParams.category
$scope.productsListing = [{
product_id: '123',
title: ' Baby Rattles',
price: 2,
userName: 'John Doe'
}, {
product_id: '456',
title: ' Kiddy Laptop',
price: 12,
userName: 'Sandy Peters'
}
]
}
])
.controller('ProductDetailsCtrl', ['$scope', '$stateParams',function($scope, $stateParams) {
$scope.id = $stateParams.id;
$scope.product = {
'title': 'Kiddy Laptop',
'description': 'lorem lipsum do re me.',
'price': 12,
'userName': 'Sandy Peters'
}
}
]);
products.html
<h1>{{category}}</h1>
<hr/>
<!-- 1st Column -->
<div class="col-md-5">
<div class="row-fluid listing sidebar" >
<div class="listing" ng-repeat="product in productsListing">
<h2><a ng-href="#/{{category%20+'/'+product.product_id}}">{{product.title}}</a> </h2>
<h5>{{product.price |currency}}</h5>
<p><i>-by:{{product.userName}}</i></p>
</div>
</div>
</div>
</div>
<!-- 2nd Column -->
<div class="col-md-7">
<div class="slide" ui-view></div>
</div>
products.details.html
<p class="title">{{id}}</p>
<h1>{{product.title}}</h1>
<p>{{product.description}}</p>
<h3>{{product.price|currency}}</h3>
It all appears fairly identical to the tutorial. I'm confused and feeling pretty dumb.
If this is your exact code, you are missing a . between your module definition and calling config.
angular.module('myApp', [...])
.config(['$stateProvider',
function($stateProvider) {
...
}
])
instead of
angular.module('myApp', [...])
config(['$stateProvider',
function($stateProvider) {
...
}
])
It actually makes sense that this is the issue, as your ui-view is not working would be caused by the lack of state definitions.
Helo,
I am new to AngularJS, and I just started using $mdToast basic function Show(). Here is my complete code for this problem, hope you can help me.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngAnimate', 'ui.bootstrap', 'ngCookies',
'ngRoute', 'ngMaterial', 'ngAria', 'ngMessages',
'myApp.view0',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.view6'
])
.run(function ($rootScope, $cookies, $http) {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
var loginCredentials = $cookies.get('logincredentials');
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: loginCredentials
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedinUser = data;
$rootScope.loggedin = true;
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
}
});
})
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view0'});
}])
.controller('LoginCtrl', ['$scope', '$uibModal', '$log', '$rootScope', '$http', '$cookies', '$mdToast', function ($scope, $uibModal, $log, $rootScope, $http, $cookies, $mdToast) {
$scope.animationsEnabled = true;
$scope.username = '';
$scope.password = '';
$scope.dialogMessage;
$scope.logout = function () {
$rootScope.loggedinUser = {};
$rootScope.loggedin = false;
$cookies.remove('logincredentials');
}
$scope.login = function () {
if ($scope.username != '' && $scope.password != '') {
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: $scope.username + ':' + $scope.password
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedin = true;
$rootScope.loggedinUser = data;
$cookies.put('logincredentials', '1:1');
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
$scope.dialogMessage = 'Uneli ste pogresan username i/ili password';
}
});
} else {
$scope.dialogMessage = 'Unesite username i password';
}
}
$scope.open = function (size) {
$scope.modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
$scope.openToast = function () {
$mdToast.show('Hello!');
};
}])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, $rootScope) {
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
<!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>Stomatoloska ordinacija</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>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ui-grid.info/release/ui-grid.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ui-grid.info/release/angular-ui-grid/ui-grid.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/view0">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Mesto</li>
<li>Lekar</li>
<li>Pacijent</li>
<li>Usluga</li>
<li>Poseta</li>
<li>view6</li>
</ul>
<div ng-controller="LoginCtrl">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login/Logout</li>
<li><a ><span class="glyphicon glyphicon-user"></span> {{loggedinUser.user}}</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--[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 class="page">
<md-button class="md-raised md-primary">Primary</md-button>
<div ng-controller="LoginCtrl" >
<md-button ng-click="openToast()">
Open a Toast!
</md-button>
<script type="text/ng-template" id="myModalContent.html">
<div ng-controller="LoginCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<button type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">×</span></button>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login/Logout</div>
</div>
<div class="panel-body" >
<form name="form" id="form" class="form-horizontal" enctype="multipart/form-data" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="user" type="text" class="form-control" name="user" value="" placeholder="User" ng-model="username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password" ng-model="password">
</div>
<div class="form-group">
<!-- Button -->
<div>
<h4>{{dialogMessage}}</h4>
</div>
<div class="col-sm-12 controls">
<button type="button" class="btn btn-danger" ng-click="cancel();logout();"><i class="glyphicon glyphicon-log-in"></i> Logout</button>
<button type="button" class="btn btn-primary pull-right" ng-click="cancel();login()"><i class="glyphicon glyphicon-log-in"></i> Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
</div>
<div class="footer navbar-fixed-bottom">
<div id="footer">Angular seed app: v<span app-version></span></div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view0/view0.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="view6/view6.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>
So the problem is not with the libraries included, i tried that and it didnt work. I should also mention that I am using angularJS seed as a child of project.
Thank you for your time.
Toast require modules ngMaterial', 'ngMessages'. I think you should get rid of assets-cache.js which is used by ngmaterial in default in codepen sample . In assets-cache.js you have a "MyApp" module defined in it . and redefining this module again in your file gives error.Try avoiding file and add ngMaterial', 'ngMessages' module dependencies to your module . This should definitely solve your problem.
Here is a sample codepen
Just click on "Settings" button on codepen, go to javascript tab and make sure you've got all of these dependencies included in your html.
Error tells you don't have it imported properly.
The toast is probaly displayed behind another element. Use parent to append your toast to an HTML element:
$scope.showSimpleToast = function () {
$mdToast.show($mdToast.simple().textContent('Hello!').parent("#HTMLelemID"));
};
parent() appends toast to the root element of the application by default.
Access $mdToast documentation here
I have write this "factory" in angularjs
var SimpleHomeCosts=angular
.module('SimpleHomeCosts', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/buys.html',
controller: 'BuysCtrl'
})
.when('/utenti', {
templateUrl: 'views/users.html',
controller: 'UsersCtrl'
})
.when('/negozi', {
templateUrl: 'views/shops.html',
controller: 'ShopsCtrl'
})
.otherwise({
redirectTo: '/'
});
})
.factory("Shop", function () {
var shop={};
return shop;
});
After in my controller I use my "Shop" class factory
SimpleHomeCosts.controller("ShopsCtrl", function ($scope,Shop) {
//================Shops Controller================
console.log(Shop,"shop");
});
this is html (Controller) shops.html
<div ng-controller="ShopsCtrl"></div>
this is index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="//angular.localhost:9000/livereload.js"></script>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="SimpleHomeCosts">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container" style="border: 0px solid blue">
<div class="row">
<div class="header" style="border: 0px solid green">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#/utenti">Utenti</a></li>
<li><a ng-href="#/spese">Spese</a></li>
<li><a ng-href="#/negozi">Negozi</a></li>
</ul>
</div>
</div>
<!-- container view -->
<div class="row" style="border: 0px solid red">
<div ng-view="" class="col-lg-12 col-md-12 col-xs-12"></div>
</div>
<div class="footer">
<!-- <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p> -->
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/ShopsCtrl.js"></script>
</body>
</html>
If I read into console browser I see:
Object { } shop ShopsCtrl.js (riga 29)
Object { } shop ShopsCtrl.js (riga 29)
Why if I ask only one time the "Shop" angular duplicates my call?
I must remove "ng-controller="ShopsCtrl" from file shops.html
I have a small node project that I'm trying to integrate angularjs into. I have a partial view which uses ng-controller and ng-repeat.
Here is my angular.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>
<ul class="menu">
<li>view1</li>
<li>view2</li>
<li>view3</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-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
<script src="filters.js"></script>
<script src="directives.js"></script>
</body>
</html>
partial3.html (this is the partial):
<div ng-controller="PersonCtrl">
<div ng-repeat="person in persons">
{{person.last}} , {{person.first}}
</div>
I just get 5 commas without the five records in the person controller.
.controller('PersonCtrl', ['$scope', function($scope) {
$scope.persons = [
{ first: "Henry", middle: "Jacob", last: "Mendocino", gender: "M" },
{ first: "Ann", middle: "Cecilia", last: "Negro", gender: "F" },
{ first: "Berta", middle: "Ann", last: "Sallyfield", gender: "F" },
{ first: "Rudolf", middle: "John", last: "Waters", gender: "M" },
{ first: "Ken", middle: "Adam", last: "Aundry", gender: "M" },
]
}])
Here is my app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/view3', {templateUrl: 'partials/partial3.html', controller: 'PersonCtrl'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Can someone please help me figure out why my data isn't being showed.
Thanks.
He/She needed to arrange his/her filesystem and express code to point to the right places...most importantly - he/she needed:
app.use(express.static(__dirname + '/views'));
so that the app knew where to serve the static content from (index.html).
I am starting out to learn angular and I want to make a one page app. I have mvc structure for angular installed via yo angular
I am trying to populate the main div with about and contact pages. However for some reason it just doesnt work for me and my browser just crashes (I guess I am putting it into infinite loop)
<div ng-controller="mainContent">
<div id="main">
<div ng-view></div>
</div>
</div>
so this is how my app is structured.
app
|
|------------scripts
| |
| ---------controllers
| | |
| | main.js
| app.js
|
|-------------views
| |
| about.html
| contact.html
| main.html
|
|
index.html
here are my files
file name : index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="myAngularApp">
<!--[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]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
filename: app.js
'use strict';
angular.module("myAngularApp", ["ui-bootstrap-tpls.js"]);
angular
.module('myAngularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl : 'views/about.html',
controller : 'aboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
filenmae: main.js
'use strict';
angular.module('myAngularApp')
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
angular.module("myAngularApp")
.controller('mainContent', function ($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
angular.module("myAngularApp")
.controller('aboutCtrl', function ($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
angular.module("myAngularApp")
.controller('contactCtrl', function ($scope) {
$scope.message = 'Everyone come and see how good I look!';
});
What can I do to fix this routing issues and have about and contact pages open up at the right place in main.
Thanks
A typical cause of infitine loop in relation to angular routing, is that one of your partials includes the ng-view directive, which tells angular to look in the router for the view to load, which then loads the partial with the ng-view directive again, which then tells angular to look at the router and load the view again and .. yeah, you get it ;)
So, check that you only have the ng-view directive only in your index.html (main container).