Angularjs-cynthia Rao Ink Dye-responsive article publishing system

(0) function

A. Adding a new article

B. Modifying a published article

C. Search for published articles

D. Note: The demo link, such as a free pass, you can directly copy the following source code, local run to see, there are many deficiencies, follow-up improvements

　

(1) interface

　　A. Articles List page

　B. Article details page

　　C. Article add page

　D. Article modification page

(2) HTML source code

<! DOCTYPE html> {{News.content}}  </p> <time> time:{{news.date}}</time> </div> </li> </ul> </div> </script> <!--add-<script type= "text/ng-t Emplate "id=" add.html "> <div class=" Cynthia-add "> <input type=" text "name=" name "value=" "cl ass= "Cynthia-add-title" ng-model= "title" placeholder= "Enter article title" > <textarea cols= "ten" rows= "class=" Cynth Ia-add-content "ng-model=" Content "placeholder=" Enter article content "></textarea> <input type=" button "name=" name "Value=" Submit "class=" Cynthia-add-submit "ng-click=" Add () "> </div> </script> <!--edit-- > <script type= "text/ng-template" id= "edit.html" > <div class= "Cynthia-add" > <inpu T type= "text" name= "name" value= "" class= "Cynthia-add-title" ng-model= "News.title" > <textarea cols= "R Ows= "Ten" class= "cynthia-Add-content "ng-model=" news.content "></textarea> <input type=" button "name=" name "value=" Commit "class= "Cynthia-add-submit" ng-click= "Update ()" > </div> </script> <!--detail--< Script type= "text/ng-template" id= "detail.html" > <div class= "Cynthia-detail" > {{news.content}}</p> <time> Time: {{news.date}}</time> <br> <a href= "#/edit/{{news.id}} "class=" CYNTHIA-EDIT-BTN "> re-edit </a> </div> </script> </div> </body> < Script type= "Text/javascript" >varApp = Angular.module (' newspub ', [' Ngroute ')]); functionRouteconfig ($routeProvider) {$routeProvider. When (‘/‘, {controller:' Listcontroller ', Templateurl:' List.html '      }). When ('/detail/:id ', {controller:' Detailcontroller ', Templateurl:' Detail.html '      }). When ('/edit/:id ', {controller:' Editcontroller ', Templateurl:' Edit.html '      }). When ('/list ', {controller:' Listcontroller ', Templateurl:' List.html '      }). When ('/add ', {controller:' Addcontroller ', Templateurl:' Add.html '      }). Otherwise ({redirectto:‘/‘          });    };    App. Config (routeconfig); varNewslist =[{ID:1, Title:' Rao wine dyeing ', Content:' The pure pure white of science has been disseminated for a long time, a lot of feeling becomes dull, can not write out that year under the window Horseshoe Jiangshan and quiet vicissitudes. Such a green Slate street, such a fine minute sunset, only sigh a piece of the past injury. Many times there are many feelings, but as long as the face of the editor, the face of a line of code, and soon gorgeous rhetoric disappeared into a trace. I do not know whether there are girls and I, from a princess with a dream age, to their own hands to shred all their fantasies, become like a man fighting, no longer rely on anyone, relying on their own hands to color a colorful fairy tale life. Perhaps it is growth, perhaps mature, but in the heart, where there is empty. When emotions can be well controlled, things can be thought of logically, the merits are clear. I don't know if it's lucky or unfortunate. A night of wind and frost. More and more found that the best place to let go is KTV, can be quiet listening to a friend in the lyrics put in a mood, guess what he experienced, can also point to the first Hi song to the sad roar of the lung. We don't mention the story behind us. A group of people in the carnival tasted their loneliness. Shanghai is very prosperous, but also very lonely. Can quickly gather a group of people accompany you to talk about life, but also lonely to find a person to speak the truth can not. We need to live with energy, and all sadness is not suitable for the circle of friends. Being busy can make you feel calm, and then not sad or happy. Floating a robbery Another section, whose twists and turns dye the wine into the song around the beam? ‘, Date:NewDate ()}, {ID:2, Title:"Living" (Yu Hua) book, Content:' The author went to the countryside to collect folk songs in the field encountered an old man is and cattle have said many names, feel curious, ask old man why a cow has so many names. So through the old man's perspective, the first person recalls the old man's life. Old man called rich, young when is a dude, marry is Mihang boss of daughter Jia Zhen, their home to his generation is the third generation. To his generation in his hand to the property through gambling all lost to the Dragon two. His father, his mother, his son, his wife, his daughter, his husband-in-law, his grandson ... These people died for various reasons in the context of land reform and the Cultural Revolution. His father was so angry that he died in the dung tank for a lifetime. His mother died when he was caught in the army. His son was celebrated because the woman who had been zhuazhuangding and fought together for the county magistrate had been drained of blood to death. His daughter-in-law Jia Zhen had cartilage disease and could not bear the death of his son followed. His daughter Feng Xia early a high fever after deaf and dumb, but also because of the death of an avalanche of children. His son-in-law yangliuqing is a crooked head, working on the work on the ground by the fall of the plate pressure to die. His grandson's bitter roots were choked to death for too long to eat beans. Finally, only the rich and the old ox, the old cow name is also called wealth. The name of this book, which is constantly dead, is called alive. A rich life endures the death of a loved one. Perhaps tell us: 1. Life is a process of losing. 2. Life is tough, and no number of grief can beat it easily. 3. The dead are not necessarily happy, but the living are going to live with all the people who have died. ‘, Date:NewDate ()},]; App.controller (' Listcontroller ',function($scope) {$scope. newslist=newslist;    }); App.controller (' Detailcontroller ',function($scope, $routeParams) {$scope. News= newslist[$routeParams. id-1];    }); App.controller (' Addcontroller ',function($scope, $location) {$scope. Title= ' '; $scope. Content= ' '; $scope. Add=function() {Newslist.push ({id:newsList.length+1, Title: $scope. Title, Content: $scope. Content, Date:NewDate ()}); $location. Path (' List ');    }    }); App.controller (' Editcontroller ',function($scope, $routeParams, $location) {$scope. News= newslist[$routeParams. id-1]; $scope. Update=function() {newslist[$routeParams. ID-1] =$scope. News; $location. Path (' List '); }    })  </script>
(3) CSS source code
*{margin:0; padding:0; border:0; Outline:none;}  body{background: #fff; Font-family: "Microsoft Yahei"; Font-size:14px;} a{Color: #555555; Text-Decoration:none;} a:hover{Cursor:pointer;} p{Color: #555555; Font-size:12px; Line-height:200%;} time{Font-size:12px; Color: #ccc;} li{List-Style:none; float: Left;}. Cynthia-post{margin:2%; Width:80D; padding:3%; Height:auto;}/*nav*/. Cynthia-nav{Height:auto;  Overflow:auto; Padding-bottom:2%; Border-bottom:2px #ddd Solid;}. Cynthia-nav li{padding:0 2%;  Height:auto; Display:block;}. Cynthia-search{Width:100%;  height:25px;  border:1px #ddd Solid; padding:0 3%; Background:url (Search.png) Right no-repeat; Background-size:20px 20px;}/*List*/. Cynthia-list{Width:100%;}. Cynthia-list li{width:85D; Margin-left:5%; Border-left:1px #ddd Solid;}. Cynthia-list li a{color: #4094c7; Font-size:16px;}. Cynthia-list Li p{margin-top:10px;}. Cynthia-list Li img{width:50px;  height:50px; Border-radius:50%; Margin-left:-25px; Margin-top:20px; border:2px #ddd Solid;}. Cynthia-list-item{Width:91%; Margin-left:5%; padding:2%; Background: #f5f5f5;}/*Add*/. Cynthia-add{margin:2%; Width:80D; padding:3%; Height:auto;}. Cynthia-add-title{Width:94%; Margin:0Auto;  border:1px #ddd Solid; Min-height:50px; padding:2%; Font-size:18px; Color: #333;}. Cynthia-add-content{Width:94%; Margin:0Auto;  border:1px #ddd Solid; Min-height:450px; padding:2%; Margin-top:10px; Font-size:14px; Color: #333;}. Cynthia-add-submit{Width:30%;  height:40px;  Background: #4094c7; Font-size:16px;  Color: #fff; Margin-top:10px;}. Cynthia-add-submit:hover{Cursor:pointer;}/*Detail*/. Cynthia-detail{margin:2%; Width:80D; padding:3%; Height:auto;}. Cynthia-detail h1{padding:3% 0;}. Cynthia-detail time{Display:inline-Block; padding:3% 0;}. Cynthia-edit-btn{Display:inline-Block; Width:25%;  height:40px;  Background: #4094c7; Font-size:16px;  Color: #fff; Margin-top:10px; Margin-bottom:10px; Text-Align:center; Line-height:40px;}
 Angularjs-cynthia Rao Ink-responsive article publishing system