在阅读本文之前我默认你已经有一点计算机编程基础了,我们打开VS新建一个asp.net网站。
新建完成大致结构如下:
这是MVC构架我们今天不进MVC ,我们再新建一个WebSite将angular、bootstrap、jquery、layui等放在里面如图:如果你没有你可以自行到官网去下载,下载完成将需要的文件复制进来即可。
我们这里新建一个index.html,将所以需要的js和css放进来,其他页面也就不用再引用这里js和css了,结构如下:
首页代码如下:
再新建page,以下几个页面
我们使用angular路由,我们事件都写在controller里面,
请求数据你可以ajax,这里我用angular里的方法。这里一下节在细讲。
基本页面就搭建好了,接下来我们在首页写一下轮播和页面 mian.html页面中写首页内容在header.html写导航菜单。
运行结果如下:页面的跳转采用#news跳转到新闻动态。
到此我们的基本环境就搭建好了。我们打开调试代码会发现header.html和mian.html的内容都在index.html里面这里有一个好处就是css和js不用重复加载。
到这里基本的页面就搭建完成了,后面我们动态获取数据和丰富页面内容。
总结:我们之前多个页面加载到同一页面用的都是iframe,现在我们使用angular路由机制,同时使用了angular中的数据双向绑定这样可以减少代码量。下一节我们详细讲解。
领取专属 10元无门槛券
私享最新 技术干货