I am starting to teach myself AngularJS and seem to be falling at the first hurdle as my test code returns an error "'angular' is not defined".
I would assume this is because the "angular" library is not loaded when I begin to reference it but I can't see why this would be the case.
My HTML file is as follows
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>FHIR Test Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<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" ng-app="app">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid! <span class="glyphicon glyphicon-ok"></span></a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Sass</h4>
<p>Sass is a mature, stable, and powerful professional grade CSS extension language.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
<h4>Modernizr</h4>
<p>Modernizr is an open-souqqce JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>
</div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"> </script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
-->
<!-- build:js scripts/plugins.js -->
<!-- endbuild -->
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>
My JS is in "main.js" as referenced at the last line of the HTML.
The content of "main.js" are
'use strict';
angular.module('app',['ui.router'])
.config(['$urlRouteProvider','$stateProvider',function($urlRouteProvider,$stateProvider)
{
$urlRouteProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templete: 'testing 123'
});
}]);
I've tested your code, the only problem is that $urlRouteProvider is wrong
Solution
main.js
angular.module('app',['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider) {
$stateProvider
.state('home', {
url: '/',
templete: '<div>testing 123</div>'
});
$urlRouterProvider.otherwise('/');
}]);
bower.json ( bower install)
{
"name": "whatever",
"version": "0.0.0",
"dependencies": {
"angular-ui-router": "~0.2.10",
"angular": "~1.2.18",
"jquery": "~2.1.1",
"modernizr": "~2.8.2"
}
}
Related
I have searched throughout the entire web, but I cannot find anyone with an answer. I am setting up a simple front-end website using the original Angular, AngularJS. Unfortunately, I cannot determine why ng-view will not display any of my "partials" (other html pages). Can anyone lend me a second set of eyes and tell me what simple mistake I am making? Thank you in advance.
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
templateURL: 'partials/MainMenu.html',
controller: 'MainMenuCtrl'
}).
when('/reports', {
// Links to the HTML page
templateURL: "partials/Reports.html",
// Links to the controller in the controller file
controller: "ReportsCtrl"
}).
when('/StoreStatistics', {
templateURL: "partials/StoreStatistics.html",
controller: "StoreStatisticsCtrl"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<section ng-include="'partials/MainMenu'"></section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
<!-- This the MainMenu.html page -->
<!-- Main Menu -->
<div class="container is-fluid">
<div class="notification">
This container is <strong>centered</strong> on desktop.
</div>
<a class="button is-primary is-outlined" ng-href="/">Home</a>
<a class="button is-info is-outlined" href="#!/reports">Reports</a>
</div>
<!-- End of Main Menu -->
Nothing wrong with the syntax, just make sure the template url is correct
// This is the app.js file
"use strict";
console.log("App.js is connected!");
// Here, you name your app (which goes into your HTML body) and then
// insert any Angular dependencies (ngRoute allows you to use the $routeProvider)
var app = angular.module('CashExpress', ['ngRoute']);
// This is the configuraiont function that routes your entire website
app.config(function($routeProvider){
console.log("We in here!!");
$routeProvider.
when('/', {
template: "<div>MENU</div>"
}).
when('/reports', {
// Links to the HTML page
template: "<div>REPORTS</div>"
}).
when('/StoreStatistics', {
template: "<div>STORE</div>"
}).
// If an error occurs, the user will be directed to the home page
otherwise('/');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<!-- This is the index -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cash Express, LLC Beta</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body ng-app="CashExpress">
<!-- Store Stats -->
<section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section>
<!-- End of Store Stats -->
<a class="button is-primary is-outlined" ng-href="#!/">Home</a>
<a class="button is-info is-outlined" ng-href="#!/reports">Reports</a>
<!-- Dynamic Page -->
<section class="section">
<div ng-view></div>
</section>
<!-- Node Modules -->
<script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script>
<!-- Angular app which is dependent on above scripts -->
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/MainMenu.js"></script>
<script type="text/javascript" src="app/controllers/StoreStatistics.js"></script>
<script type="text/javascript" src="app/controllers/Reports.js"></script>
</body>
</html>
You have excess syntax.. remove /
Try this
<a class="button is-primary is-outlined" href="#/!">Home</a>
<a class="button is-info is-outlined" href="#!reports">Reports</a>
i'm trying in my app to include a template (already shown) that include other template.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tasks Overview</title>
<!-- Angular framework -->
<script src="assets/js/angular.min.js"></script>
<!-- Main module -->
<script src="app.js"></script>
<!-- Components -->
<!-- Services -->
<script src="app/components/logger/logger-service.js"></script>
<script src="app/components/resource/resource-service.js"></script>
<script src="app/components/integrity_check/integrity_check-service.js"></script>
<script src="app/components/date_utilities/month_translation_utility-service.js"></script>
<!-- History -->
<script src="app/components/history/history-controller.js"></script>
<!-- Period -->
<script src="app/components/period/period-controller.js"></script>
<script src="app/components/period/directives/year_picker/year_picker-directive.js"></script>
<script src="app/components/period/directives/month_picker/month_picker-directive.js"></script>
<!-- Shell -->
<script src="app/components/shell/shell-controller.js"></script>
<!-- Calendar -->
<script src="app/components/calendar/directives/day/day-directive.js"></script>
<script src="app/components/calendar/calendar-controller.js"></script>
<!-- UI libraries -->
<link rel="stylesheet" type="text/css" href="assets/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/system.css">
<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/materialize.min.js"></script>
<!-- Task entities -->
<script src="app/components/task/task-controller.js"></script>
<script src="app/components/task/tasks-service.js"></script>
<!-- Main -->
<script src="app/components/main/main-controller.js"></script>
<!-- Google material icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- External libraries -->
<script src="assets/js/FileSystem.js"></script>
</head>
<body ng-app="wtd">
<!--History component-->
<div id="history" ng-include="'app/components/history/history_main-view.html'" ng-controller="historyController as vm"></div>
<!--Period component-->
<div id="period" ng-include="'app/components/period/period_main-view.html'" ng-controller="periodController as vm"></div>
<!--Calendar component-->
<div id="calendar" ng-include="'app/components/calendar/calendar_main-view.html'" ng-controller="calendarController as vm"></div>
<!--Shell component-->
<div id="shell" ng-include="'app/components/shell/shell_main-view.html'" ng-controller="shellController as vm"></div>
<!--Main controller-->
<div id="main" ng-controller="mainController"></div>
</body>
</html>
calendar_main-view.html
<div class="col l10 offset-l1 m10 offset-m1 s10 offset-s1">
<!-- List view mode -->
<div ng-if="view.mode.list" ng-include="app/components/calendar/calendar_list-view.html">
</div>
<!-- Grid view mode -->
<div ng-if="view.mode.grid" ng-include="app/components/calendar/calendar_grid-view.html"></div>
</div>
Problem appear on the second level of ng-include (file calendar_grid-view.html). No one xhr call is done by browser to include the file.
What's wrong?
You are missing single quote.
<div ng-if="view.mode.list" ng-include="'app/components/calendar/calendar_list-view.html'">
<div ng-if="view.mode.grid" ng-include="'app/components/calendar/calendar_grid-view.html'"></div>
Make sure view.mode.list and view.mode.grid evaluted to truthy in order to display html.
I wanted to do a browser like tabs but the event will be triggered inside a angular datatables (im using this one - angular-datatables). I have already setup the controller to listen on click per row to add a dynamic tab. But sadly, it does not add the tab. I logged the $scope.tabs array and found out that the tab was added but not on the <uib-tabset>. Please refer to the screenshot below;
Above screenshot shows the datatable, when i click the highlighted box (red) it was supposed to add a tab after "Dyanamic Title 1" tab and set it as active (or currently selected tab). How do i do this everytime i click a row it will add a dynamic tab?
Here is my controller for angularJS
controller.js
app.controller('mainCtrl',['$scope',
'API_URL',
'DTOptionsBuilder',
'DTColumnBuilder',
'$resource',
function($scope, API_URL, DTOptionsBuilder, DTColumnBuilder, $resource){
$scope.tabs = [
{ title:'Dynamic Title 1', content:'Dynamic content 1' },
];
$scope.model = {
};
var vm = $scope;
vm.dtOptions = DTOptionsBuilder.fromSource(API_URL+'employee')
.withPaginationType('full_numbers').withBootstrap()
.withOption('rowCallback', function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
$('td', nRow).unbind('click');
$('td', nRow).bind('click', function() {
$scope.tabs.push({
title: aData.empid,
content: 'Testing Content'
});
});
});
vm.dtColumns = [
DTColumnBuilder.newColumn('empid').withTitle('ID'),
DTColumnBuilder.newColumn('fname').withTitle('First name'),
DTColumnBuilder.newColumn('lname').withTitle('Last name'),
DTColumnBuilder.newColumn('position').withTitle('Position'),
DTColumnBuilder.newColumn('email').withTitle('Email'),
];
}]);
Here is my html
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Test</title>
<!-- Bootstrap -->
<link href="[[ asset('/css/bootstrap.min.css') ]]" rel="stylesheet">
<!-- Angular DataTables -->
<link href="[[ asset('/css/angular/angular-datatables.min.css') ]]" rel="stylesheet">
<link href="[[ asset('/css/angular/datatables.bootstrap.min.css') ]]" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="medrec">
<div class="container-fluid">
<div class="row">
<!-- header -->
</div>
<br/><br/><br/><br/><br/>
<div class="row">
<div class="col-md-12">
<div ng-controller="mainCtrl">
<uib-tabset active="active">
<uib-tab index="0" heading="Static title">
<table datatable="" dt-options="dtOptions"
dt-columns="dtColumns" class="table table-hover"
width="100%">
</table>
</uib-tab>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
</div>
</div>
</div>
#include('templates.footer')
<!-- jQuery -->
<script src="[[ asset('/js/jquery.2.2.3.min.js') ]]"></script>
<!-- jQuery DataTables -->
<script src="[[ asset('/js/jquery.dataTables.min.js') ]]"></script>
<!-- AngularJS Library -->
<script src="[[ asset('/app/lib/angular.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-datatables.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-animate.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-route.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-touch.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-resource.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular-sanitize.min.js') ]]"></script>
<script src="[[ asset('/app/lib/angular.ui-bootstrap.min.js') ]]"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="[[ asset('/js/bootstrap.min.js') ]]"></script>
<script src="[[ asset('/js/angular-datatables.bootstrap.min.js') ]]"></script>
<!-- AngularJS Modules -->
<script src="[[ asset('/app/app.js') ]]"></script>
<!-- AngularJS Config -->
<!-- script src="[[ asset('/app/config/route.js') ]]"></script -->
<!-- AngularJS Directives -->
<!-- script src="[[ asset('/app/controller/directive.js') ]]"></script -->
<!-- AngularJS Controllers -->
<script src="[[ asset('/app/controller/main-controller.js') ]]"></script>
</body>
</html>
You are updating a $scope variable from within a jQuery callback. I believe you can force an update of the <uib-tab>'s by using $apply :
$scope.tabs.push({
title: aData.empid,
content: 'Testing Content'
});
$scope.$apply();
I have the following task writtenm in grunt , which removes ngCordova from index.html. How do I correct it?
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//
},
test: {
devDependencies: true,
src: '<%= karma.unit.configFile %>',
ignorePath: /\.\.\//,
fileTypes:{
js: {
block: /(([\s\t]*)\/{2}\s*?bower:\s*?(\S*))(\n|\r|.)*?(\/{2}\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
},
// Replace Google CDN references
cdnify: {
dist: {
html: ['<%= yeoman.dist %>/*.html']
}
},
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/css/app.css">
<!-- endbuild -->
</head>
<!-- <header class="header">
<h4>welcome</h4>
</header>-->
<body ng-app="app">
<!--[if lte IE 8]>
<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" ng-view=""></div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!--this line below gets erased when i run grunt serve or grunt build-->
<script src="bower_components/ngCordova/dist/ng-cordova.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-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-dynforms/dynamic-forms.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- <script src="scripts/ng-cordova.js"></script>-->
<script src="cordova.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->
<script src="cordova.js"></script>
</body>
<!--<footer class="footer footertxt">
</footer>-->
</html>
I'm a beginner in Angular and I have a problem with the functions. I have a simple code. In that there are two alerts to probe they are not getting called.
HTML
<div data-ng-controller="MainCtrl">
<form novalidate class="simple-form">
Last name:
<input type="text" name="lname" data-ng-model="product.name"><br>
<input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
</form>
<button ng-click="mandar()">Remove</button>
</div>
My JavaScript:
var app =angular.module('pdbApp');
app.controller('MainCtrl', function ($scope, $window) {
$window.alert('I am here!');
$scope.mandar=function(){
$window.alert('Hi there!');
};
});
I also have the app.js
angular
.module('pdbApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
});
And also my index.html
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- endbuild -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
</head>
<body ng-app="pdbApp">
<div class="container">
<div data-ng-view=""></div>
</div>
<!-- Libraries -->
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<!-- 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-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
<!-- Some Bootstrap Helper Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/underscore.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
When I press the mandar button doesn't happen anything.
Can anybody tell me why it is no working?
Seems like you add ng-app="pdbApp" on your page to tell angular to run on the page. Also make sure you have added the angular.js file on the page.
Markup
<div ng-app="pdbApp" data-ng-controller="MainCtrl">
<form novalidate class="simple-form">
Last name: <input type="text" name="lname" data-ng-model="product.name"><br>
<input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
</form>
</div>
without any stack trace all we can do is speculate. But as others have said you need to include ng-app within your template so angular knows the scope of the HTML for that app. Also you need ng-controller so angular knows the scope of your controller in the HTML.
However these are all basic things covered in all tutorials, the thing your doing that isn't covered in most is your app definition. This will cause your app to fail if it isn't intentional.
Your doing
var app =angular.module('pdbApp');
This tells angular 'find me an existing application called pdbApp'. However is this is your first decliration of that app your need to tell angular to create it.
You do that by adding an array:
var app =angular.module('pdbApp', []);
The array contains a list of application dependencies if you have any.