Hi i start to use angularjs v1.4.7 and angular-route v1.5.0 to develop a spa.
The structure on in my project is:
- static
-- js
---- libs
------ angular.min.js
------ angular-route.min.js
---- app.js
- web
-- views
----- ... my views ...
-- index.html
Im getting this error in the browser console:
Uncaught Error: [$injector:modulerr]
My index:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="../static/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/app.css" />
<title>
JM2
</title>
<script type="text/javascript" src="../static/js/libs/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/libs/angular.min.js"></script>
<script type="text/javascript" src="../static/js/libs/angular-route.min.js"></script>
<script type="text/javascript" src="../static/js/app.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
JM2
</a>
</div>
<div class="collapse navbar-collapse"
id="navbar">
<ul class="nav navbar-nav">
<li role="presentation">
<a href="#">
Home
</a>
</li>
<li role="presentation">
<a href="#builds">
Builds
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<a href="#admin">
Admin
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div ng-view></div>
</div>
</body>
</html>
My app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider'], function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.when('/builds', {
templateUrl: 'views/builds.html',
controller: 'buildsController'
})
.when('/admin', {
templateUrl: 'views/admin.html',
controller: 'adminController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('homeController', function($scope) {
});
app.controller('buildsController', function($scope) {
});
app.controller('adminController', function($scope) {
});
Why am I having this error? I had read some questions and all you say is the problem of import of angular-route but I have imported.
Thank you very much in advance.
The dependencies mentioned are incorrect. You need to pass an array with the name of the dependencies as strings and the function as the last element in array with the dependencies in the same sequence.
Change app.config(['$routeProvider'], function($routeProvider) {
to
app.config(['$routeProvider', function($routeProvider) {
// ^ Removed ]
...
...
}]); // <----- Add ] here
Related
What am I doing wrong? I cannot make it work. The link of login and signin don't react as they are not links. I see the url of the login when I do the mouseover upon the link the following address localhost:8080/demo/index.html#/login. I click but it doesn't work at all.
At the beginning, I didn't realize that I needed to change the anchor attribute href to ui-sref, but when I use href, it redirects to login page completely without the index.html template structure.
html - index.html
<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/demo.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0px !important;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header container-fluid">
<a class="navbar-brand" href="index.html">Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="login">Log in</a></li>
<li><a ui-sref="signup">Sign in</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- /.container -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('images/header.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading" style="height: 250px;">
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1" ui-view="layout">
<!-- THIS IS JUST CONTENT WHEN ARRIVING TO THE INDEX PAGE -->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
blah blah
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 24, 2014</p>
</div>
<hr>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
</div>
</footer>
<script src="../scripts/jquery-3.1.0.min.js"></script>
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-ui-router.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/ui-bootstrap-tpls-2.1.3.min.js"></script>
<script src="../scripts/demo.js"></script>
</body>
</html>
demo.js
var app = angular.module('demo', ['ui.router', 'ui.bootstrap']);
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/');
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('index', {
url: '/index',
view:{
'layout': {
templateUrl: 'index.html'
}
},
controller: ''
})
.state('login', {
url: '/login',
view: {
'layout': {
templateUrl: 'login.html'
}
},
controller: ''
})
.state('signup', {
url: '/signup',
view: {
layout: {
templateUrl: 'signup.html'
}
},
controller: 'MyController'
})
});
You're doing it completely wrong.
First of all you need to have at least one ui-view which should be present inside index.html. What's more there won't be any state which is using index.html.
Ok, so here's an example how your index.html should look like:
index.html - navbar-brand destination was changed into ui-sref="home" which is your home/starting page. It's easier to use ui-sref which takes state name (home,login,signup) than href which takes url (#/,#/login,#/singup). Besides you'll have one place to change state destination (url) than searching for all href instances.
<!DOCTYPE html>
<html x-ng-app="demo">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/demo.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation" style="margin-bottom: 0px !important;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header container-fluid">
<a class="navbar-brand" ui-sref="home">Demo</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a ui-sref="login">Log in</a></li>
<li><a ui-sref="signup">Sign in</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- /.container -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('images/header.jpg')">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="site-heading" style="height: 250px;">
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<!-- a place where your home.html, login.html and signup.html will be included -->
<div ui-view=""></div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="container">
</div>
</footer>
<script src="../scripts/jquery-3.1.0.min.js"></script>
<script src="../scripts/angular.min.js"></script>
<script src="../scripts/angular-ui-router.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>
<script src="../scripts/ui-bootstrap-tpls-2.1.3.min.js"></script>
<script src="../scripts/demo.js"></script>
</body>
</html>
home.html - template which was previously included inside index.html
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Title
</h2>
<h3 class="post-subtitle">
blah blah
</h3>
</a>
<p class="post-meta">Posted by Start Bootstrap on September 24, 2014</p>
</div>
demo.js - here you can find all states definition which are going to be placed in place of ui-view directive.
var app = angular.module('demo', ['ui.router', 'ui.bootstrap']);
app.config(function($stateProvider, $urlRouterProvider, $urlMatcherFactoryProvider){
$urlRouterProvider.otherwise('/');
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: function(){}
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: function(){}
})
.state('signup', {
url: '/signup',
templateUrl: 'signup.html',
controller: 'MyController'
})
});
I was able to get your code to work when i removed the 'layout' portion. also, i dont think you need the index page in the routing.
<div ui-view></div>
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('signup', {
url: '/signup',
templateUrl: 'signup.html'
})
I was trying to use bootstrap-ui module but I have the following error:
angular.min.js:6Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=delyApp&p1=Error%3A…%20q%20(http%3A%2F%2Flocalhost%3A8080%2Fscripts%2Fangular.min.js%3A7%3A355)
I've this file:
index.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Delivery Online</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Listado de deliverys
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div ng-view></div>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/ui-bootstrap-tpls-2.0.1.min.js"></script>
<script src="app/route.js"></script>
<script src="app/controller.js"></script>
and in the route.js I injected the ui.bootstrap module:
var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);
app.config(function ($routeProvider) {
$routeProvider
.when("/agregar", {
templateUrl: "agregar.html",
controller: "controller"
})
.when("/deliverys", {
templateUrl: "deliverys.html",
controller: "controller"
})
.otherwise({
templateUrl: "deliverys.html",
controller: "controller"
});
});
But it's currently not working.. giving the modulerr error... any idea? I guess that the js files are in the correct order. Thanks
There is an issue with injection,
Change the code ,
From
var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);
To
var app = angular.module("delyApp", ['ngRoute','ui.bootstrap']);
I am currently having trouble with AngularJS html5Mode. I am working on a blog site that is hosted on my localhost WAMP server. I have a base URL defined in my index.html file and I have html5Mode set to true in the config section in my app.js file and I also have a .htaccess file in my directory.
This is what my url looks like without html5 mode enabled.
http://localhost/Blog/index.html/#posts
If I load my site like this:
localhost/Blog/
or
localhost/Blog/index.html it will redirct
to
localhost/Blog/posts which is what I want.
But if I try to type this url manually or refresh the page it goes to localhost/dashboard and If I click on one of the other links it will go to
localhost/nameOfLink
I am not 100% sure but I think the problem could be in the .htaccess file
This is my index.html file
<!DOCTYPE html>
<html lang="en" ng-app="blog" class="no-js" ng-cloak>
<head>
<base href="/Blog/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#29B6F6">
<meta name="msapplication-navbutton-color" content="#29B6F6">
<meta name="apple-mobile-web-app-status-bar-style" content="#29B6F6">
<title>Phone reviews</title>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
<link rel='stylesheet' id='primary-font-css' href='http://fonts.googleapis.com/css?family=Karla:300,400,500,700' type='text/css' media='all' />
<link rel="stylesheet" href="http://blackrockdigital.github.io/startbootstrap-sb-admin/font-awesome/css/font-awesome.min.css">
<link href="main.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav0">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Phone Reviews
</div>
<div class="collapse navbar-collapse" id="nav0" ng-controller="NavCtrl">
<ul class="nav navbar-nav navbar-right">
<li ng-click="scroll()" ng-class="{ active: isActive('/posts')}">Home</li>
<li ng-click="scroll()" ng-class="{ active: isActive('/contact')}">Contact Us</li>
<li ng-click="scroll()" ng-class="{ active: isActive('/registration')}">Register</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">My Account <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" ng-init="userInit(<?php echo $_SESSION['name'] $_SESSION['role']; ?>)">
<li>{{user}}</li>
<li>Account</li>
<li>Favourites</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
<header class="header">
<h1>Phone Reviews</h1>
</header>
<div class="alert alert-dismissible alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>You have successfully registered! Go to your email to confirm account.</p>
</div>
<div class="social-icons">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-pinterest"></i></li>
</ul>
</div>
<div class="container-fluid" id="wrapper">
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 content"><div ng-view></div></div>
<div ng-include="'includes/sidebar.html'"></div>
</div>
<div ng-include="'includes/footer.html'"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-sanitize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" data-pin-save="false" src="//assets.pinterest.com/js/pinit.js"></script>
<script src="ui-bootstrap.js"></script>
<script src="page.js"></script>
<script src="app.js"></script>
</body>
</html>
This is my app.js file
var app = angular.module('blog', ['ngRoute', 'ngSanitize', 'ui.bootstrap.tpls', 'angularUtils.directives.dirPagination'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/posts', { templateUrl: 'includes/main.html', controller: 'MainCtrl' }).
when('/posts/:postUrl', { templateUrl: 'includes/post.html', controller: 'PostCtrl' }).
when('/contact', { templateUrl: 'includes/contact.html', controller: 'ContactCtrl' }).
when('/registration', { templateUrl: 'includes/register.html', controller: 'RegistrationCtrl'}).
otherwise({redirectTo: '/posts'});
}]);
This is my .htaccess file
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
i'm getting Angular.js: 13424 Error: [ng:areq] Argument 'enfermerosController' is not a function, got undefinederror I don't know what is happening. Found in some places that it's maybe i'm calling ng-app twice or my module but I don't. I'm using Angular 1.5.3 and it's my first time with this problem. I will be grateful with any help you can give.
Thanks
This is my router
'use strict'
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/views/admin/partials/hola.html',
controller: 'adminController'
})
$routeProvider.when('/admin/geriatras', {
templateUrl: '/views/admin/partials/geriatras.html',
controller: 'geriatrasController'
})
$routeProvider.when('/admin/medicos', {
templateUrl: '/views/admin/partials/medicos.html',
controller: 'medicosController'
})
$routeProvider.when('/admin/enfermeros', {
templateUrl: '/views/admin/partials/enfermeros.html',
controller: 'enfermerosController'
})
$routeProvider.when('/admin/pacientes', {
templateUrl: '/views/admin/partials/pacientes.html',
controller: 'pacientesController'
})
$routeProvider.otherwise({
redirectTo: '/'
})
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
}])
and after this is one of my controllers pacientesController (with all I have the same problem)
'use strict'
myApp.controller('pacientesController',['$scope', ($scope) => {
$scope.hello = "hello"
}])
This is enfermerosController (as you see, there's no code yet in my controllers)
'use strict'
myApp.controller('enfermerosController', ['$scope', function($scope) {
}])
and my html is this one
<!DOCTYPE html>
<html lang="es" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hospital</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="/libs/bootstrap/dist/css/bootstrap.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="/public/assets/dist/css/Matadero.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>:D</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Hospital</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Navegación</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- Notifications: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="hidden-xs">!!Nombre Usuario Loggeado¡¡</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<!-- Menu Body -->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
Cerrar sesión
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" ng-controller="navController">
<li class="header">Menú</li>
<li class="active treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>Personal Médico</span> <i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li ng-class="{active: isActive('/admin/geriatras')}"><i class="fa fa-circle-o"></i>Geriatras</li>
<li ng-class="{active: isActive('/admin/medicos')}"><i class="fa fa-circle-o"></i>Médicos</li>
<li ng-class="{active: isActive('/admin/enfermeros')}"><i class="fa fa-circle-o"></i>Enfermeros</li>
</ul>
</li>
<li ng-class="{active: isActive('/admin/pacientes')}"><i class="fa fa-book"></i> <span>Pacientes</span></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Panel de Control</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
<div ng-view="">
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Equipo Fiucsa</b>
</div>
<strong>Tecnológico de Monterrey © 2016 Repositorio.</strong>
</footer>
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!--Angular -->
<script type="text/javascript" src="/libs/angular/angular.js"></script>
<script type="text/javascript" src="/libs/angular-route/angular-route.js"></script>
<script type="text/javascript" src="/public/js/app.js"></script>
<script src="/libs/angular-aria/angular-aria.js"></script>
<script src="/libs/angular-animate/angular-animate.js"></script>
<script src="/libs/angular-material/angular-material.js"></script>
<script src="/libs/angular-messages/angular-messages.js"></script>
<script type="text/javascript" src="/libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js"></script>
<script type="text/javascript" src="/public/js/controllers/cuestionarioController.js"></script>
<script type="text/javascript" src="/public/js/controllers/geriatrasController.js"></script>
<script type="text/javascript" src="/public/js/controllers/medicosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/enfermerosController.js"></script>
<script type="text/javascript" src="/public/js/controllers/navController.js"></script>
<script type="text/javascript" src="/public/js/controllers/adminController.js"></script>
<!-- jQuery 2.1.4 -->
<script src="/libs/jquery/dist/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<!-- Bootstrap 3.3.5 -->
<script src="/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/public/assets/dist/js/app.min.js"></script>
</body>
</html>
I just found my error and it was the arrow functions when I define my controllers. I think we can only use arrow functions inside controllers not when you define it
theres a little explanation here:
Are ES6 arrow functions incompatible with Angular?
I am learning angularJS and i am using the book, "Learning Web Development with Bootstrap and AngularJs" and i am trying to create a ng-click functionality to a button. but nothing happens when i click it. this is my controller.js...
function AppCtrl($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
this is my view...
<html ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<title>Contacts Manager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contacts Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="active">Browse</li>
<li>Add Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
</nav>
<div class="col-sm-8">
<button ng-click="clickHandler()">Click Me</button>
</div>
</body>
</html>
what am i doing wrong???
You need to create a module, and make the controller on the module. You then need to tell angular to bootstrap the module as the root of the application (using ng-app directive). I would reccomend taking another look at the exaple you are following.
Here's a short snippet setting up a button with a click-handler:
angular.module('myApp', [])
.controller('AppCtrl', function($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="clickHandler()">Click Me</button>
</div>
Inject $window, and call it. You have not dome that